/* Piezas propias del portal, sobre linea-grafica.css (tokens y componentes base). */

.contenido{max-width:1200px;margin:0 auto;padding:24px 28px 64px;display:flex;flex-direction:column;gap:24px}
.marca-nombre{font-size:var(--fs-4);font-weight:700;color:var(--titulo);text-decoration:none;margin-right:4px}
.en-linea{display:inline;margin:0}
.btn.link{text-decoration:none}
.usuario-nombre{display:inline-flex;align-items:center;gap:6px}
.usuario-nombre svg.ic{width:16px;height:16px}

/* aviso de la última acción */
.aviso-pl{max-width:1200px;margin:16px auto 0;padding:11px 44px 11px 15px;border-radius:var(--r-panel);
  font-size:var(--fs-3);position:relative;box-shadow:0 6px 18px rgba(15,23,42,.08);
  background:var(--good-bg);color:var(--good)}
.aviso-pl.bad{background:var(--bad-bg);color:var(--bad)}
.aviso-pl.warn{background:var(--warn-bg);color:var(--warn)}
.aviso-pl.info{background:var(--accent-soft);color:var(--cuadre-ink);font-weight:600}
.aviso-cerrar{all:unset;cursor:pointer;position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:18px;line-height:1;opacity:.7}
.aviso-cerrar:hover{opacity:1}
@media (min-width:1260px){ .aviso-pl{margin-left:auto;margin-right:auto;width:calc(1200px - 56px)} }

/* ingreso */
.pantalla-ingreso{background:var(--bg)}
.ingreso{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.tarjeta-ingreso{width:min(380px,100%);display:flex;flex-direction:column;gap:10px;padding:28px 26px}
.tarjeta-ingreso h1{font-size:var(--fs-5)}
.logo-ingreso{height:34px;width:auto;align-self:flex-start;margin-bottom:6px}
body.oscuro .logo-ingreso{background:#fff;border-radius:6px;padding:3px 8px}
.form-ingreso{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.form-ingreso .btn{justify-content:center;padding:8px 12px;font-size:var(--fs-3)}
.pie-ingreso{font-size:var(--fs-2);color:var(--muted);margin:6px 0 0}
.field input{width:100%}

/* inicio: tarjetas de apps */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.app-tarjeta{display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:inherit;
  transition:transform var(--dur-micro) var(--ease-estandar),box-shadow var(--dur-micro) var(--ease-estandar)}
a.app-tarjeta:hover{transform:translateY(-2px);box-shadow:inset 3px 0 0 var(--ribete),var(--sombra-flotante)}
a.app-tarjeta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app-tarjeta.pronto{opacity:.65;cursor:default}
.app-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--navy)}
.app-ic svg.ic{width:20px;height:20px}
.app-ic.grande{width:56px;height:56px;border-radius:14px}
.app-ic.grande svg.ic{width:28px;height:28px}
.app-texto{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.app-texto b{font-size:var(--fs-4);color:var(--titulo)}
.app-texto small{font-size:var(--fs-2);color:var(--muted)}
.vacio-apps{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 22px}

/* cuenta */
.card.angosta{max-width:460px}
.fields-col{display:flex;flex-direction:column;gap:12px;margin-top:12px}

/* administración */
.fila-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:12px}
.fila-form .field{min-width:180px;flex:1 1 180px}
.chk-linea{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-3);padding-bottom:7px;color:var(--strong)}
table.usuarios input:not([type=checkbox]){width:100%;min-width:140px;padding:4px 7px;font-size:var(--fs-2)}
table.usuarios td.acciones{white-space:nowrap}
table.usuarios td.acciones .btn{margin-left:4px}
table.usuarios tr.inactivo td{color:var(--faint)}
tr.fallo td{color:var(--bad)}
.card h2{margin-bottom:2px}

@media (max-width:760px){
  .contenido{padding:16px 16px 48px}
  .usuario-nombre span,.usuario-nombre{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Tablas de texto: todo a la izquierda (la Línea Gráfica alinea a la derecha para cifras). */
.tw table.texto th,.tw table.texto td{text-align:left}
.tw table.texto th.centro,.tw table.texto td.centro{text-align:center}
.card .sub{margin:4px 0 12px}

/* Áreas del departamento (28/10/2026) */
.area{display:flex;flex-direction:column;gap:12px}
.area-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 2px}
.area-cab h2{font-size:var(--fs-4)}
.area-desc{font-size:var(--fs-2);color:var(--muted)}
.area-vacia{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:var(--fs-3)}
.area-th{color:var(--navy)!important;font-weight:600!important}