/* ============================================================
 * inicio.css — Pantalla de Inicio (aterrizaje después del login)
 * ------------------------------------------------------------
 * RESPONSABILIDAD:
 *   El saludo, las tarjetas de área y los dos elementos que Inicio
 *   agrega a la barra superior (la fecha y el avatar).
 *
 * UN SOLO MARCADO PARA LAS DOS PANTALLAS:
 *   La tarjeta es la misma en escritorio y en mobile; lo que cambia
 *   lo resuelve este archivo en el breakpoint de 900px —el mismo
 *   que usa el resto de la app—:
 *     · escritorio → tres columnas, acento arriba, "Ingresar →"
 *     · mobile     → una columna, acento a la izquierda, chevrón
 *   Los dos remates ("Ingresar →" y el chevrón) están siempre en el
 *   HTML y acá se muestra el que corresponde. Duplicar el marcado
 *   obligaría a acordarse de tocar los dos lados en cada cambio.
 *
 * COLORES:
 *   Se declaran como variables con su contraparte en modo oscuro,
 *   igual que en rrhh.css. Ningún hex suelto que tenga que cambiar
 *   con el tema.
 * ============================================================ */

:root{
  --ini-card:#ffffff;
  --ini-borde:#e5e9f0;
  --ini-titulo:#0f2a52;      /* el azul oscuro del saludo y los títulos */
  --ini-texto:#4b5563;
  --ini-sombra:0 1px 3px rgba(45,38,33,.08);
  --ini-sombra-hover:0 8px 24px rgba(15,29,58,.12);

  --ini-azul:#2f7be8;        /* Tesorería        */
  --ini-azul-bg:#e8f1fd;
  --ini-ambar:#e0a32e;       /* Dirección        */
  --ini-ambar-bg:#fdf3dc;
  --ini-verde:#1f9254;       /* Recursos Humanos */
  --ini-verde-bg:#e6f4ec;
}

[data-theme="dark"]{
  --ini-card:#1e293b;
  --ini-borde:#334155;
  --ini-titulo:#e2e8f0;
  --ini-texto:#94a3b8;
  --ini-sombra:0 1px 4px rgba(0,0,0,.4);
  --ini-sombra-hover:0 8px 24px rgba(0,0,0,.5);

  --ini-azul:#3b82f6;
  --ini-azul-bg:#1e3a5f;
  --ini-ambar:#fbbf24;
  --ini-ambar-bg:#3a2f14;
  --ini-verde:#34d399;
  --ini-verde-bg:#12372a;
}

.ini{ color:var(--ini-texto) }
.ini *{ box-sizing:border-box }

/* ---- Saludo ---- */
.ini-hola{ margin:0; font-size:34px; line-height:1.15; font-weight:700; color:var(--ini-titulo) }
.ini-sub{ margin:6px 0 0; font-size:14px; color:var(--ini-texto) }
.ini-sin{ margin:26px 0 0; font-size:14px; color:var(--ini-texto) }

/* La fecha arriba del saludo es SOLO de mobile: en escritorio vive en la barra
   superior, que ahí tiene lugar de sobra. */
.ini-fecha-mob{ display:none; font-size:13px; color:var(--ini-texto); margin-bottom:8px }

/* ---- Grilla de tarjetas ---- */
.ini-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin-top:28px }

/* La tarjeta es un <button>: se entra a un área con ella, así que tiene que ser
   alcanzable con el teclado y anunciarse como control. Un <div> con onclick no
   lo es. De ahí que haya que resetear los estilos que trae el botón. */
.ini-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  width:100%; text-align:left; font-family:inherit; cursor:pointer;
  padding:26px 24px 22px; background:var(--ini-card);
  border:1px solid var(--ini-borde); border-top:3px solid var(--ini-acento);
  border-radius:10px; box-shadow:var(--ini-sombra);
  transition:box-shadow .16s ease, transform .16s ease;
}
.ini-card:hover{ box-shadow:var(--ini-sombra-hover); transform:translateY(-2px) }
.ini-card:focus-visible{ outline:2px solid var(--ini-acento); outline-offset:2px }

/* El acento de cada área. Se define una vez por tarjeta y lo usan el borde, el
   cuadradito del icono y el "Ingresar →". */
.ini-azul { --ini-acento:var(--ini-azul);  --ini-acento-bg:var(--ini-azul-bg) }
.ini-ambar{ --ini-acento:var(--ini-ambar); --ini-acento-bg:var(--ini-ambar-bg) }
.ini-verde{ --ini-acento:var(--ini-verde); --ini-acento-bg:var(--ini-verde-bg) }

.ini-card-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:46px; height:46px; border-radius:10px;
  background:var(--ini-acento-bg); color:var(--ini-acento);
}
.ini-card-ico svg{ width:22px; height:22px; display:block }

.ini-card-txt h3{ margin:18px 0 0; font-size:19px; font-weight:700; color:var(--ini-titulo) }
.ini-card-txt p { margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--ini-texto) }

.ini-card-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:20px;
  font-size:13.5px; font-weight:600; color:var(--ini-acento);
}
.ini-card-cta svg{ width:15px; height:15px; transition:transform .16s ease }
.ini-card:hover .ini-card-cta svg{ transform:translateX(3px) }

/* El chevrón es el remate de mobile: acá no se muestra. */
.ini-card-chev{ display:none }

/* ---- Barra superior (solo en Inicio) ---- */
.ini-fecha{ font-size:13px; color:var(--text2, #4b5563); white-space:nowrap }
.ini-avatar{
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:50%;
  background:var(--accent, #2f7be8); color:#fff; font-size:13px; font-weight:700;
}

/* ============================================================
 *  MOBILE ( < 900px ) — el mismo umbral que el resto de la app
 * ============================================================ */
@media(max-width:899.98px){
  .ini-fecha-mob{ display:block }
  .ini-fecha{ display:none !important }   /* la fecha baja al contenido */
  .ini-avatar{ display:flex !important }  /* y aparece el avatar */

  .ini-hola{ font-size:28px }

  .ini-cards{ grid-template-columns:1fr; gap:12px; margin-top:20px }

  /* La tarjeta se acuesta: icono a la izquierda, texto al medio, chevrón a la
     derecha, y el acento pasa del borde de arriba al de la izquierda. */
  .ini-card{
    flex-direction:row; align-items:center; gap:14px;
    padding:16px 14px;
    border-top:1px solid var(--ini-borde); border-left:3px solid var(--ini-acento);
  }
  .ini-card:hover{ transform:none }
  .ini-card-ico{ width:40px; height:40px }
  .ini-card-ico svg{ width:19px; height:19px }

  .ini-card-txt{ flex:1; min-width:0 }
  .ini-card-txt h3{ margin:0; font-size:16px }
  .ini-card-txt p { margin:3px 0 0; font-size:13px }

  .ini-card-cta{ display:none }
  .ini-card-chev{ display:flex; align-items:center; flex-shrink:0; color:var(--ini-texto); opacity:.6 }
  .ini-card-chev svg{ width:18px; height:18px }
}

@media (prefers-reduced-motion: reduce){
  .ini-card, .ini-card-cta svg{ transition:none }
  .ini-card:hover{ transform:none }
}