/* ============================================================
   INGClean — hoja de estilos base (mobile-first).
   Identidad visual: sección 2 de la especificación.
   ============================================================ */

:root {
    /* Paleta de marca (sección 2) */
    --azul-marino:   #0A2540; /* marca / sidebar */
    --azul-accion:   #1E6FE0; /* acción */
    --verde-esmeralda:#10B981;/* completada / verificada */
    --verde-menta:   #34D399; /* acentos */
    --ambar:         #F59E0B; /* por vencer */
    --rojo:          #EF4444; /* vencida */
    --negro-azulado: #02040B; /* base oscuro */
    --superficie:    #F4F7FB; /* fondo claro */
    --blanco:        #FFFFFF;
    --texto:         #0A2540;
    --borde:         #d8e0ea;

    /* Tonos derivados (hover/activo) de cada color de marca */
    --azul-accion-hover:  #1A62CC;
    --azul-accion-activo: #1653B0;
    --verde-hover:        #0EA372;
    --verde-activo:       #0C8A61;
    --rojo-hover:         #E02E2E;
    --rojo-activo:        #C82323;
    --marino-2:           #123157; /* navy un punto más claro (degradados) */

    /* Superficies suaves para badges/alertas */
    --azul-suave:   #e7f0fd;
    --verde-suave:  #e7f8f1;
    --ambar-suave:  #fdf1dc;
    --rojo-suave:   #fde8e8;
    --gris-texto:   #5b6b80;

    /* Escala de espaciado */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;

    /* Radios */
    --radio-sm:  8px;
    --radio-md:  12px;
    --radio-lg:  16px;
    --radio-pill: 999px;

    /* Sombras suaves (tinte navy de marca) */
    --sombra-sm: 0 1px 2px rgba(10, 37, 64, .06);
    --sombra-md: 0 4px 12px rgba(10, 37, 64, .10);
    --sombra-lg: 0 12px 28px rgba(10, 37, 64, .16);

    /* Anillo de foco accesible (azul de acción) */
    --anillo-foco: 0 0 0 3px rgba(30, 111, 224, .35);

    /* Transición estándar para lo interactivo */
    --trans: 170ms ease;
}

* { box-sizing: border-box; }

/* Transiciones suaves en todo lo interactivo */
a, button, .btn, .link, input, select, textarea,
.tarjeta, .tabla-tareas tbody tr, .lista-vencimiento li,
.check-completar, .badge, .filtros a {
    transition:
        background-color var(--trans),
        border-color var(--trans),
        color var(--trans),
        box-shadow var(--trans),
        transform var(--trans),
        text-decoration-color var(--trans);
}

/* Foco visible (accesibilidad) para teclado */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.check-completar:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
    border-radius: var(--radio-sm);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texto);
    background: var(--superficie);
    line-height: 1.5;
}

/* Enlaces de contenido en azul de marca (la sidebar los pinta en blanco) */
a { color: var(--azul-accion); }
a:hover { color: var(--azul-accion-hover); }

/* --- Wordmark: SIEMPRE "INGClean®" completo en blanco (sección 2) --- */
.wordmark {
    color: var(--blanco);
    font-weight: 700;
    letter-spacing: .2px;
}

/* --- Topbar --- */
.topbar {
    background: linear-gradient(180deg, var(--marino-2), var(--azul-marino));
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: var(--sombra-md);
    position: relative;
    z-index: 5;
}

/* Botón hamburguesa: oculto en escritorio, visible en móvil (<768px) */
.hamburguesa {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
}
.hamburguesa span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--blanco);
    border-radius: 2px;
}

/* --- Layout app --- */
.layout { display: flex; min-height: calc(100vh - 56px); }

.sidebar {
    background: linear-gradient(180deg, var(--marino-2), var(--azul-marino));
    color: var(--blanco);
    width: 220px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar nav a {
    color: var(--blanco);
    text-decoration: none;
    display: block;
    padding: .55rem .7rem;
    border-radius: var(--radio-sm);
    border-left: 3px solid transparent;
}
.sidebar nav a:hover {
    color: var(--blanco);
    background: rgba(255, 255, 255, .08);
    border-left-color: var(--verde-menta);
}
.sidebar-usuario { font-size: .9rem; opacity: .9; }
.sidebar .link { color: var(--verde-menta); }
.sidebar .link:hover { color: var(--blanco); }

.contenido { flex: 1; padding: 1.5rem; }

/* --- Botones --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid var(--borde);
    background: var(--blanco);
    color: var(--texto);
    padding: .55rem .95rem;
    border-radius: var(--radio-sm);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    box-shadow: var(--sombra-sm);
}
.btn:hover {
    border-color: #c2cedd;
    box-shadow: var(--sombra-md);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); box-shadow: var(--sombra-sm); }

/* Botones por intención, cada uno con hover (tono + elevación) y activo (hundido) */
.btn--accion  { background: var(--azul-accion);     color: var(--blanco); border-color: var(--azul-accion); }
.btn--accion:hover  { background: var(--azul-accion-hover);  border-color: var(--azul-accion-hover); }
.btn--accion:active { background: var(--azul-accion-activo); border-color: var(--azul-accion-activo); }

.btn--ok      { background: var(--verde-esmeralda); color: var(--blanco); border-color: var(--verde-esmeralda); }
.btn--ok:hover  { background: var(--verde-hover);  border-color: var(--verde-hover); }
.btn--ok:active { background: var(--verde-activo); border-color: var(--verde-activo); }

.btn--peligro { background: var(--rojo);            color: var(--blanco); border-color: var(--rojo); }
.btn--peligro:hover  { background: var(--rojo-hover);  border-color: var(--rojo-hover); }
.btn--peligro:active { background: var(--rojo-activo); border-color: var(--rojo-activo); }

.link {
    background: none;
    border: none;
    color: var(--azul-accion);
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.link:hover { color: var(--azul-accion-hover); text-decoration: underline; }

/* --- Alertas --- */
.alerta { padding: .65rem .85rem; border-radius: var(--radio-sm); border-left: 4px solid currentColor; }
.alerta--error { background: var(--rojo-suave);  color: var(--rojo); }
.alerta--ok    { background: var(--verde-suave); color: var(--verde-esmeralda); }

/* --- Badges de estado (píldora) --- */
.badge {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: var(--radio-pill);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.6;
    text-transform: capitalize;
    white-space: nowrap;
}
.badge--pendiente  { background: var(--azul-suave);  color: var(--azul-accion-activo); }
.badge--completada { background: var(--verde-suave); color: var(--verde-activo); }
.badge--archivada  { background: #eef1f5;            color: var(--gris-texto); }
.badge--por-vencer { background: var(--ambar-suave); color: #9a6500; }
.badge--vencida    { background: var(--rojo-suave);  color: var(--rojo-activo); }
/* Prioridad */
.badge--alta  { background: var(--rojo-suave);  color: var(--rojo-activo); }
.badge--media { background: var(--ambar-suave); color: #9a6500; }
.badge--baja  { background: #eef1f5;            color: var(--gris-texto); }

/* --- Tarjetas del dashboard --- */
.tarjetas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-sm);
    border-top: 3px solid var(--azul-accion); /* acento de marca */
}
.tarjeta:hover { box-shadow: var(--sombra-lg); transform: translateY(-2px); }
.tarjeta-num { font-size: 1.9rem; font-weight: 700; }
.tarjeta-rotulo { color: var(--gris-texto); font-size: .85rem; }
.tarjeta--por-vencer  { border-top-color: var(--ambar); }
.tarjeta--vencidas    { border-top-color: var(--rojo); }
.tarjeta--completadas { border-top-color: var(--verde-esmeralda); }
.tarjeta--por-vencer .tarjeta-num  { color: var(--ambar); }
.tarjeta--vencidas .tarjeta-num    { color: var(--rojo); }
.tarjeta--completadas .tarjeta-num { color: var(--verde-esmeralda); }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; background: var(--blanco); }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--borde); }
.tabla-tareas {
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
}
.tabla-tareas thead th {
    background: var(--superficie);
    color: var(--gris-texto);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.tabla-tareas tbody tr:hover { background: var(--azul-suave); }
.tabla-tareas tbody tr:last-child td { border-bottom: none; }

/* Tarea completada = título tachado en verde esmeralda con fecha (sección 2).
   Micro-interacción: el título lleva SIEMPRE una línea de tachado transparente,
   y al completar el color pasa a verde con transición (sin salto brusco). */
.tabla-tareas td.td-titulo a,
.lista-vencimiento .lv-cuerpo a {
    text-decoration: line-through;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
}
.tachado,
.tabla-tareas td.td-titulo a.tachado,
.tarea--completada td.td-titulo a,
.lista-vencimiento .lv-cuerpo a.tachado,
.tarea--completada .lv-cuerpo a {
    text-decoration: line-through;
    text-decoration-color: var(--verde-esmeralda);
    text-decoration-thickness: 2px;
    color: var(--verde-esmeralda);
}
/* Fila completada: contenido atenuado para que destaque el tachado */
.tarea--completada td { color: var(--gris-texto); }
.fecha-fin { display: block; color: var(--verde-esmeralda); font-size: .8rem; }

/* Form del checkbox de completar/reabrir dentro de las listas */
.form-check-completar { display: inline; margin: 0; }
.form-check-completar .check-completar {
    cursor: pointer;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--verde-esmeralda); /* check verde de marca */
}
.btn-mini {
    font-size: .75rem;
    padding: .25rem .55rem;
    margin-left: .35rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--blanco);
    cursor: pointer;
}

/* --- Formularios --- */
.formulario { max-width: 480px; display: flex; flex-direction: column; gap: var(--sp-4); }
.formulario label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.formulario input, .formulario select, .formulario textarea {
    padding: .6rem .7rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    font: inherit;
    background: var(--blanco);
    color: var(--texto);
}
.formulario input:hover, .formulario select:hover, .formulario textarea:hover {
    border-color: #c2cedd;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
    outline: none;
    border-color: var(--azul-accion);
    box-shadow: var(--anillo-foco);
}

/* --- Feedback de validación por campo --- */
.error-campo { color: var(--rojo); font-weight: 600; }
.ayuda { color: #5b6b80; font-weight: 400; }
.formulario .check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }

/* --- Filtros / cabeceras --- */
.cabecera-seccion { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.filtros { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; }
.filtros a {
    text-decoration: none;
    color: var(--gris-texto);
    padding: .4rem .85rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pill);
    background: var(--blanco);
    font-weight: 600;
    font-size: .9rem;
}
.filtros a:hover { border-color: var(--azul-accion); color: var(--azul-accion); }
.filtros .activo {
    background: var(--azul-accion);
    border-color: var(--azul-accion);
    color: var(--blanco);
}

/* --- Listas de vencimiento del dashboard --- */
.listas-vencimiento { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.lista-vencimiento { list-style: none; padding: 0; margin: 0; }
.lista-vencimiento li { padding: .45rem .4rem; border-bottom: 1px solid var(--borde); display: flex; align-items: flex-start; gap: .5rem; border-radius: var(--radio-sm); }
.lista-vencimiento li:hover { background: var(--azul-suave); }
.lista-vencimiento .lv-cuerpo { display: flex; flex-direction: column; }
.lista-vencimiento small { display: block; color: #5b6b80; }
.lista-vencidas h2 { color: var(--rojo); }
.lista-por-vencer h2 { color: var(--ambar); }
.vacio { color: #5b6b80; }

/* La gráfica se inicializa con JS; sin JS queda la tabla de respaldo. */
.grafica { margin: 1.5rem 0; }

/* --- Login --- */
.pantalla-login { display: grid; place-items: center; min-height: 100vh; background: var(--azul-marino); }
.caja-login {
    background: var(--blanco);
    padding: 2rem;
    border-radius: 16px;
    width: min(360px, 92vw);
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.wordmark--login { color: var(--azul-marino); font-size: 1.4rem; }

/* --- Pie --- */
.pie { background: var(--negro-azulado); color: var(--blanco); padding: .8rem 1rem; text-align: center; }

/* ============================================================
   Responsivo móvil (<768px)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Hamburguesa visible; sidebar colapsable */
    .hamburguesa { display: flex; }

    .layout { flex-direction: column; }

    /* Menú oculto por defecto; se despliega con .menu-abierto en <body> */
    .sidebar {
        width: auto;
        display: none;
        flex-direction: column;
    }
    body.menu-abierto .sidebar { display: flex; }
    /* Áreas táctiles cómodas en el menú */
    .sidebar nav a { padding: .8rem 0; min-height: 44px; }

    /* Tarjetas del dashboard a una columna */
    .tarjetas { grid-template-columns: 1fr; }
    .listas-vencimiento { grid-template-columns: 1fr; }

    /* --- Tablas de tareas -> tarjetas apiladas --- */
    .tabla-tareas thead { display: none; }
    .tabla-tareas {
        border: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }
    .tabla-tareas,
    .tabla-tareas tbody,
    .tabla-tareas tr,
    .tabla-tareas td {
        display: block;
        width: 100%;
    }
    .tabla-tareas tr {
        border: 1px solid var(--borde);
        border-radius: var(--radio-md);
        background: var(--blanco);
        padding: .5rem .9rem;
        margin-bottom: .8rem;
        box-shadow: var(--sombra-sm);
    }
    .tabla-tareas tbody tr:hover { transform: none; } /* en móvil sin lift */
    .tabla-tareas td {
        border: none;
        padding: .45rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
    }
    /* Etiqueta de cada dato (desde data-label) a la izquierda */
    .tabla-tareas td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--azul-marino);
        text-align: left;
    }
    /* La fila del checkbox y el título no necesitan etiqueta repetida */
    .tabla-tareas td.td-check { justify-content: flex-start; }
    .tabla-tareas td.td-check::before { content: ""; }
    .tabla-tareas td.td-titulo { font-size: 1.05rem; }

    /* Áreas táctiles mínimas 44px en acciones */
    .btn,
    .btn-mini { min-height: 44px; }
    /* El checkbox queda visualmente ~24px pero con zona táctil de 44px (wrapper) */
    .check-completar { width: 1.5rem; height: 1.5rem; }
    .form-check-completar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }
    .acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
    .acciones .btn { width: 100%; }
}