/* ===========================================================
   conectarr4 — sistema de diseno
   Modo oscuro profesional, mobile first, en espanol.

   Nota: el body NO lleva place-items. Chromium aplica alineacion de caja
   tambien en layout de bloque, asi que un place-items:center global encoge
   y centra a los hijos de bloque. Para centrar se usa .centrado.
   =========================================================== */

/* La fuente se sirve desde el propio servidor, no desde Google Fonts.
   Un @import remoto bloquea el renderizado y ata la carga de la app a un
   tercero; en un telefono con conexion lenta eso se nota. Es la variable de
   DM Sans, un solo archivo por rango que cubre de 400 a 700. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fuentes/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fuentes/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Superficies, de mas profunda a mas elevada */
  --fondo:          #0b0d12;
  --superficie:     #12151c;
  --superficie-alta:#181c26;
  --superficie-hover:#1d2230;

  /* Bordes */
  --borde:          #232936;
  --borde-suave:    #1a1f2a;
  --borde-fuerte:   #303849;

  /* Texto */
  --texto:          #e9eef7;
  --texto-tenue:    #8b96ab;
  --texto-debil:    #5c6678;

  /* Acento e indicadores de estado */
  --acento:         #4c8dff;
  --acento-fuerte:  #3b7ae8;
  --acento-tenue:   rgba(76, 141, 255, .12);
  --acento-borde:   rgba(76, 141, 255, .35);

  --ok:             #34d399;
  --ok-tenue:       rgba(52, 211, 153, .12);
  --alerta:         #fbbf24;
  --alerta-tenue:   rgba(251, 191, 36, .12);
  --error:          #f87171;
  --error-tenue:    rgba(248, 113, 113, .12);

  /* Formas */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  --sombra-sm: 0 1px 2px rgba(0,0,0,.4);
  --sombra-md: 0 4px 16px rgba(0,0,0,.35);
  --sombra-lg: 0 12px 40px rgba(0,0,0,.45);

  --transicion: 140ms cubic-bezier(.4,0,.2,1);

  /* Alto de la barra inferior en telefonos */
  --alto-nav-movil: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }
p  { margin: 0; }
a  { color: var(--acento); }

/* Foco visible y consistente en todo lo interactivo */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ---------- Utilidades ---------- */
.centrado {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.apilado    { display: flex; flex-direction: column; }
.silencioso { color: var(--texto-tenue); }
.debil      { color: var(--texto-debil); }
.pequeno    { font-size: .8125rem; }

/* ---------- El atributo hidden gana siempre ---------- */
/* Cualquier regla que fije display (.campo, .botonera, .casilla...) pisa al
   atributo hidden, porque una clase tiene mas peso que el estilo por defecto
   del navegador. El resultado es que ocultar algo desde JavaScript no hace
   nada y el elemento se queda a la vista. Paso con los campos de fecha del
   reporte, que se veian con el periodo en "Este mes". */
[hidden] { display: none !important; }

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: .625rem; }
.marca .simbolo {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--acento), #7c5cff);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
}
/* El logo propio de una empresa (F9) ocupa el mismo lugar que el "c4" por
   defecto, sin el fondo en degrade -- es una imagen, no una inicial. */
.marca .simbolo-logo {
  background: none;
  object-fit: contain;
}

.marca .datos { display: flex; flex-direction: column; min-width: 0; }
.marca .nombre { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }
.marca .empresa {
  font-size: .75rem;
  color: var(--texto-debil);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  padding: 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
}
.tarjeta > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
.campo > label { font-size: .8125rem; font-weight: 500; color: var(--texto-tenue); }

.campo input,
.campo select {
  width: 100%;
  padding: .75rem .875rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input::placeholder { color: var(--texto-debil); }
.campo input:hover:not(:focus) { border-color: var(--borde-fuerte); }
.campo input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}

/* Campo con boton adentro, para mostrar u ocultar la contrasena */
.campo-con-accion { position: relative; }
.campo-con-accion input { padding-right: 3rem; }
.campo-con-accion button {
  position: absolute;
  right: .375rem;
  bottom: .375rem;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--texto-debil);
  cursor: pointer;
  transition: color var(--transicion), background var(--transicion);
}
.campo-con-accion button:hover { color: var(--texto); background: var(--superficie-hover); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton.bloque { width: 100%; }

.boton.principal { background: var(--acento); color: #fff; }
.boton.principal:hover:not(:disabled) { background: var(--acento-fuerte); }

.boton.secundario {
  background: transparent;
  border-color: var(--borde);
  color: var(--texto-tenue);
}
.boton.secundario:hover:not(:disabled) {
  border-color: var(--borde-fuerte);
  color: var(--texto);
  background: var(--superficie-hover);
}
.boton.peligro:hover:not(:disabled) { border-color: var(--error); color: var(--error); }

/* Indicador de carga dentro de un boton */
.boton .girando {
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .boton .girando { animation-duration: 2s; }
  * { transition-duration: .01ms !important; }
}

/* ---------- Avisos ---------- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: .875rem;
}
.aviso svg { flex-shrink: 0; margin-top: .125rem; }
.aviso.error { border-color: var(--error-tenue); background: var(--error-tenue); color: var(--error); }
.aviso.ok    { border-color: var(--ok-tenue);    background: var(--ok-tenue);    color: var(--ok); }
.aviso.info  { border-color: var(--acento-tenue);background: var(--acento-tenue);color: var(--acento); }

/* Banner fijo arriba de toda la pantalla mientras se esta viendo una empresa
   prestada (superadmin, F7.4). Va antes de .disposicion, no adentro: tiene
   que verse igual en el celular, donde el panel lateral ni se dibuja. */
.banner-superadmin {
  border-radius: 0;
  border-width: 0 0 1px;
  align-items: center;
  flex-wrap: wrap;
  padding: .625rem 1rem;
}
.banner-superadmin span { flex: 1; min-width: 12rem; }
.banner-superadmin time { font-weight: 500; }

/* ---------- Etiquetas de estado ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .5rem;
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}
.etiqueta.ok      { background: var(--ok-tenue);     color: var(--ok); }
.etiqueta.alerta  { background: var(--alerta-tenue); color: var(--alerta); }
.etiqueta.error   { background: var(--error-tenue);  color: var(--error); }
.etiqueta.neutra  { background: var(--superficie-hover); color: var(--texto-tenue); }
.etiqueta.acento  { background: var(--acento-tenue); color: var(--acento); }
.etiqueta .punto  { width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
table.datos { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.datos th {
  padding: .5rem .75rem .5rem 0;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-debil);
  white-space: nowrap;
}
table.datos td {
  padding: .6875rem .75rem .6875rem 0;
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: middle;
}
table.datos tr:last-child td { border-bottom: none; }
table.datos tbody tr { transition: background var(--transicion); }
table.datos tbody tr:hover { background: var(--superficie-alta); }
.numerico { font-variant-numeric: tabular-nums; }

/* ===========================================================
   Estructura de la aplicacion
   Escritorio: menu lateral fijo.
   Telefono:   barra superior con la marca y barra inferior de navegacion.
   =========================================================== */
.disposicion { display: flex; min-height: 100dvh; }

.lateral {
  display: flex;
  flex-direction: column;
  width: 16rem;
  flex-shrink: 0;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--borde-suave);
  background: var(--superficie);
}
.lateral > .marca { padding: .25rem .5rem 1.5rem; }

.lateral nav { display: flex; flex-direction: column; gap: .125rem; flex: 1; }
.lateral nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: var(--r-md);
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: .9375rem;
  transition: background var(--transicion), color var(--transicion);
}
.lateral nav a svg { flex-shrink: 0; opacity: .85; }
.lateral nav a:hover { background: var(--superficie-hover); color: var(--texto); }
.lateral nav a.activa { background: var(--acento-tenue); color: var(--acento); font-weight: 500; }
.lateral nav a.activa svg { opacity: 1; }

.lateral .pie { border-top: 1px solid var(--borde-suave); padding-top: .875rem; }

.persona { display: flex; align-items: center; gap: .625rem; padding: .25rem .5rem .75rem; min-width: 0; }
.persona .inicial {
  display: grid;
  place-items: center;
  width: 2.125rem; height: 2.125rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--superficie-hover);
  border: 1px solid var(--borde);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--texto-tenue);
}
.persona .datos { min-width: 0; display: flex; flex-direction: column; }
.persona .datos .nombre {
  font-size: .875rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.persona .datos .rol { font-size: .75rem; color: var(--texto-debil); }

.contenido { flex: 1; min-width: 0; padding: 1.75rem 2rem 3rem; }
.contenido > header { margin-bottom: 1.5rem; }
.contenido > header p { margin-top: .25rem; color: var(--texto-tenue); font-size: .9375rem; }

.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* La barra superior y la inferior solo existen en telefonos */
.barra-movil, .nav-movil { display: none; }

@media (max-width: 52rem) {
  .lateral { display: none; }

  .barra-movil {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--borde-suave);
    background: color-mix(in srgb, var(--superficie) 85%, transparent);
    backdrop-filter: blur(12px);
  }
  .barra-movil .persona { padding: 0; }
  .barra-movil .persona .datos { display: none; }

  .contenido { padding: 1.25rem 1rem calc(var(--alto-nav-movil) + 1.5rem); }
  .contenido > header { margin-bottom: 1.25rem; }
  h1 { font-size: 1.3125rem; }

  /* Navegacion abajo: al alcance del pulgar */
  .nav-movil {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: flex;
    justify-content: space-around;
    gap: .25rem;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borde-suave);
    background: color-mix(in srgb, var(--superficie) 92%, transparent);
    backdrop-filter: blur(12px);
  }
  .nav-movil a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1875rem;
    padding: .375rem .25rem;
    border-radius: var(--r-sm);
    color: var(--texto-debil);
    text-decoration: none;
    font-size: .6875rem;
    text-align: center;
  }
  .nav-movil a.activa { color: var(--acento); }
  .nav-movil a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabla-scroll { margin: 0 -1.25rem; padding: 0 1.25rem; }

  /* En pantallas chicas el encabezado de tarjeta se apila, si no la nota
     secundaria le come el ancho al titulo y ambos quedan partidos. */
  .tarjeta > header {
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    margin-bottom: .875rem;
  }
}

/* Enlace de cuenta, separado de las secciones del sistema */
.lateral .pie nav { margin-bottom: .75rem; }
.lateral .pie nav a.aparte {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border-radius: var(--r-md);
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: .875rem;
  transition: background var(--transicion), color var(--transicion);
}
.lateral .pie nav a.aparte:hover { background: var(--superficie-hover); color: var(--texto); }
.lateral .pie nav a.aparte.activa { background: var(--acento-tenue); color: var(--acento); }

/* Aviso destacado, para lo que no conviene que pase desapercibido */
.aviso.alerta-fuerte {
  margin-bottom: 1rem;
  border-color: var(--alerta);
  background: var(--alerta-tenue);
  color: var(--alerta);
}
.aviso.alerta-fuerte a { color: inherit; font-weight: 500; }

/* ---------------------------------------------------------------------------
   Dialogos
   ---------------------------------------------------------------------------
   Sin esto el navegador pone su propio marco: borde blanco y fondo claro
   sobre un tema oscuro. Estaba solo en usuarios.css, asi que los dialogos de
   pagos y de configuracion se veian con un recuadro blanco alrededor. Va aca
   una sola vez; cada pantalla ajusta el ancho si lo necesita.
   --------------------------------------------------------------------------- */
dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-lg);
}
dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
dialog h2 { margin-bottom: 1.25rem; }
dialog .campo span { margin-top: .25rem; display: block; }
dialog .aviso { margin-bottom: 1rem; }
dialog .botonera { display: flex; gap: .625rem; margin-top: 1.25rem; }
dialog .botonera .boton { flex: 1; }