@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400..700&display=swap');

/* ==========================================================================
   MONOCASH — hoja de estilos unica.
   Cero estilos inline, cero bloques <style> en las vistas.
   Exactamente 5 tamanos de tipografia: --t-cifra, --t-titulo, --t-card,
   --t-cuerpo, --t-micro. Ningun font-size fuera de esas variables.
   ========================================================================== */

/* 1. Variables ============================================================ */

:root {
    /* Superficies */
    --fondo:          #F6F6F3;
    --superficie:     #FFFFFF;
    --superficie-alt: #EDEDEA;
    --tinta:          #0D0D0D;

    /* Acento */
    --verde:          #7FE47E;
    --verde-suave:    #D8F7D6;
    --verde-oscuro:   #2E7D32;

    /* Texto */
    --texto:          #0D0D0D;
    --texto-medio:    #6B6B68;
    --texto-tenue:    #A3A39F;
    --texto-inverso:  #FFFFFF;

    /* Estados */
    --alerta:         #FFB020;
    --peligro:        #E5484D;
    --info:           #5B7FFF;
    --borde:          #E4E4E0;

    /* Badges */
    --badge-porvencer-fondo: #FFF3DC;
    --badge-porvencer-texto: #8A5A00;
    --badge-mora-fondo:      #FFE5E6;
    --badge-mora-texto:      #B4242A;
    --badge-reportado-fondo: #E6EBFF;
    --badge-reportado-texto: #2E4BC7;

    /* Forma y espacio */
    --radio-card:  24px;
    --radio-chip:  999px;
    --radio-input: 12px;
    --sombra:      0 1px 2px rgba(13, 13, 13, .04), 0 8px 24px rgba(13, 13, 13, .06);
    --sombra-alta: 0 2px 4px rgba(13, 13, 13, .06), 0 16px 40px rgba(13, 13, 13, .10);
    --espacio:     8px;

    /* Tipografia — los unicos 5 tamanos del sistema */
    --t-cifra:  44px;
    --t-titulo: 28px;
    --t-card:   17px;
    --t-cuerpo: 14px;
    --t-micro:  12px;

    --fuente: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* 2. Reset ================================================================ */

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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: var(--t-cuerpo);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* 3. Tipografia =========================================================== */

.cifra {
    font-size: var(--t-cifra);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.titulo {
    font-size: var(--t-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.titulo-card {
    font-size: var(--t-card);
    font-weight: 600;
    line-height: 1.3;
}

.etiqueta {
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-medio);
}

.tenue {
    color: var(--texto-tenue);
}

.medio {
    color: var(--texto-medio);
}

.negativo {
    color: var(--peligro);
}

.numerico {
    font-variant-numeric: tabular-nums;
}

/* 4. Layout =============================================================== */

.shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: calc(var(--espacio) * 2);
    padding: calc(var(--espacio) * 2);
    min-height: 100vh;
}

.workspace {
    display: flex;
    flex-direction: column;
    gap: calc(var(--espacio) * 3);
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--espacio) * 2);
    padding: calc(var(--espacio) * 2) calc(var(--espacio) * 1);
}

.topbar-acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio);
}

.contenido {
    display: flex;
    flex-direction: column;
    gap: calc(var(--espacio) * 3);
    padding-bottom: calc(var(--espacio) * 6);
}

.rejilla {
    display: grid;
    gap: calc(var(--espacio) * 2);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rejilla-2 {
    display: grid;
    gap: calc(var(--espacio) * 2);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.fila {
    display: flex;
    align-items: center;
    gap: var(--espacio);
    flex-wrap: wrap;
}

.fila-entre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio);
}

.apilado {
    display: flex;
    flex-direction: column;
    gap: var(--espacio);
}

/* 5. Sidebar ============================================================== */

.sidebar {
    position: sticky;
    top: calc(var(--espacio) * 2);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: calc(var(--espacio) * 3);
    height: calc(100vh - var(--espacio) * 4);
    padding: calc(var(--espacio) * 3);
    background: var(--superficie);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sidebar-pie {
    display: flex;
    flex-direction: column;
    gap: var(--espacio);
    padding-top: calc(var(--espacio) * 2);
    border-top: 1px solid var(--borde);
}

/* 6. Cards ================================================================ */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--espacio) * 2);
    padding: calc(var(--espacio) * 3);
    background: var(--superficie);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra);
}

/* Una sola card negra por pantalla: si hay dos, ninguna destaca. */
.card--tinta {
    background: var(--tinta);
    color: var(--texto-inverso);
}

.card--tinta .etiqueta,
.card--tinta .medio {
    color: rgba(255, 255, 255, .62);
}

.card--tinta .tenue {
    color: rgba(255, 255, 255, .45);
}

.card--alt {
    background: var(--superficie-alt);
    box-shadow: none;
}

.card--plana {
    padding: 0;
    overflow: hidden;
}

.card-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio);
    padding: calc(var(--espacio) * 3) calc(var(--espacio) * 3) 0;
}

.card-cuerpo {
    padding: calc(var(--espacio) * 2) calc(var(--espacio) * 3) calc(var(--espacio) * 3);
}

.card-flecha {
    position: absolute;
    top: calc(var(--espacio) * 2);
    right: calc(var(--espacio) * 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radio-chip);
    background: var(--superficie-alt);
    color: var(--texto);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.card-flecha:hover {
    transform: translateX(2px);
    background: var(--verde);
}

.card--tinta .card-flecha {
    background: var(--verde);
    color: var(--tinta);
}

.card-pie {
    display: flex;
    align-items: baseline;
    gap: var(--espacio);
}

/* Estado vacio: invita a actuar, no informa que no hay resultados. */
.vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio);
    padding: calc(var(--espacio) * 5) calc(var(--espacio) * 3);
    text-align: center;
    color: var(--texto-medio);
}

.vacio-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio-chip);
    background: var(--verde-suave);
    color: var(--verde-oscuro);
    font-size: var(--t-card);
    font-weight: 600;
}

/* 7. Formularios ========================================================== */

.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-etiqueta {
    font-size: var(--t-micro);
    font-weight: 500;
    color: var(--texto-medio);
}

.entrada {
    width: 100%;
    padding: 12px 14px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-input);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.entrada:focus {
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px var(--verde-suave);
}

.entrada--error {
    border-color: var(--peligro);
}

.campo-error {
    font-size: var(--t-micro);
    font-weight: 500;
    color: var(--peligro);
}

.campo-ayuda {
    font-size: var(--t-micro);
    color: var(--texto-tenue);
}

.casilla {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio);
    cursor: pointer;
}

.casilla input {
    width: 16px;
    height: 16px;
    accent-color: var(--tinta);
}

.aviso {
    padding: 12px 16px;
    border-radius: var(--radio-input);
    background: var(--verde-suave);
    color: var(--verde-oscuro);
    font-weight: 500;
}

.aviso--error {
    background: var(--badge-mora-fondo);
    color: var(--badge-mora-texto);
}

/* 8. Badges y estados ===================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radio-chip);
    background: var(--superficie-alt);
    color: var(--texto-medio);
    font-size: var(--t-micro);
    font-weight: 500;
    white-space: nowrap;
}

.badge--pagada {
    background: var(--verde-suave);
    color: var(--verde-oscuro);
}

.badge--neutro {
    background: var(--superficie-alt);
    color: var(--texto-medio);
}

.badge--porvencer {
    background: var(--badge-porvencer-fondo);
    color: var(--badge-porvencer-texto);
}

.badge--mora {
    background: var(--badge-mora-fondo);
    color: var(--badge-mora-texto);
}

.badge--reportado {
    background: var(--badge-reportado-fondo);
    color: var(--badge-reportado-texto);
}

.badge--abandonada {
    background: var(--tinta);
    color: var(--texto-inverso);
}

.badge--nivel {
    background: var(--tinta);
    color: var(--texto-inverso);
    font-weight: 600;
}

.punto {
    width: 6px;
    height: 6px;
    border-radius: var(--radio-chip);
    background: currentColor;
}

/* Chips de filtro: el activo se invierte a negro. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radio-chip);
    background: var(--superficie);
    color: var(--texto-medio);
    box-shadow: var(--sombra);
    font-size: var(--t-micro);
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.chip:hover {
    color: var(--texto);
}

.chip.is-activo {
    background: var(--tinta);
    color: var(--texto-inverso);
}

/* 9. Botones ============================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio);
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radio-chip);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra);
    font-size: var(--t-cuerpo);
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.boton:hover {
    box-shadow: var(--sombra-alta);
}

.boton:active {
    transform: translateY(1px);
}

.boton--primario {
    background: var(--tinta);
    color: var(--texto-inverso);
}

/* Verde solo para lo positivo: cobrar, confirmar, dar por pagado. */
.boton--verde {
    background: var(--verde);
    color: var(--tinta);
}

.boton--fantasma {
    background: transparent;
    box-shadow: none;
    color: var(--texto-medio);
}

.boton--fantasma:hover {
    background: var(--superficie-alt);
    box-shadow: none;
    color: var(--texto);
}

.boton--peligro {
    background: var(--badge-mora-fondo);
    color: var(--badge-mora-texto);
}

.boton--bloque {
    width: 100%;
}

/* 10. Sidebar admin ======================================================= */

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--t-card);
    font-weight: 700;
    letter-spacing: -.01em;
}

.marca-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--verde);
    color: var(--tinta);
    font-size: var(--t-cuerpo);
    font-weight: 700;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio);
    padding: 10px 14px;
    border-radius: var(--radio-chip);
    color: var(--texto-medio);
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.nav-link:hover {
    background: var(--superficie-alt);
    color: var(--texto);
}

.nav-link.is-activo {
    background: var(--tinta);
    color: var(--texto-inverso);
}

.nav-link[aria-disabled='true'] {
    color: var(--texto-tenue);
    cursor: default;
}

.nav-link[aria-disabled='true']:hover {
    background: transparent;
    color: var(--texto-tenue);
}

.nav-fase {
    font-size: var(--t-micro);
    font-weight: 500;
    color: var(--texto-tenue);
}

.nav-conteo {
    padding: 2px 8px;
    border-radius: var(--radio-chip);
    background: var(--badge-mora-fondo);
    color: var(--badge-mora-texto);
    font-size: var(--t-micro);
    font-weight: 600;
}

.sesion {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sesion-nombre {
    font-weight: 600;
}

.sesion-correo {
    font-size: var(--t-micro);
    color: var(--texto-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 11. Dashboard =========================================================== */

.tabla {
    font-size: var(--t-cuerpo);
}

.tabla th {
    padding: 0 calc(var(--espacio) * 2) var(--espacio);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    text-align: left;
}

.tabla td {
    padding: 14px calc(var(--espacio) * 2);
    border-top: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla tr:first-child td {
    border-top: 0;
}

.tabla .col-derecha {
    text-align: right;
}

.tabla-nombre {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tabla-secundario {
    font-size: var(--t-micro);
    color: var(--texto-tenue);
}

/* Barras: todas apagadas, solo el periodo actual en verde. */
.barras {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--espacio) * 1.5);
    height: 132px;
    padding-top: var(--espacio);
}

.barra {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--espacio);
    height: 100%;
}

.barra-columna {
    width: 100%;
    min-height: 4px;
    border-radius: 10px;
    background: var(--superficie-alt);
}

.barra.is-actual .barra-columna {
    background: var(--verde);
}

.barra-mes {
    font-size: var(--t-micro);
    font-weight: 500;
    color: var(--texto-tenue);
    text-transform: capitalize;
}

.barra.is-actual .barra-mes {
    color: var(--texto);
}

.barra-globo {
    position: absolute;
    bottom: calc(100% - 96px);
    padding: 4px 10px;
    border-radius: var(--radio-chip);
    background: var(--tinta);
    color: var(--texto-inverso);
    font-size: var(--t-micro);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.barra:hover .barra-globo,
.barra.is-actual .barra-globo {
    opacity: 1;
}

.lista-simple {
    display: flex;
    flex-direction: column;
}

.lista-simple li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio);
    padding: 12px 0;
    border-top: 1px solid var(--borde);
}

.lista-simple li:first-child {
    border-top: 0;
}

/* 12. Portal cliente ====================================================== */
/* Base del portal (§6). Las vistas se construyen en la Fase 5. */

.portal {
    max-width: 720px;
    margin: 0 auto;
    padding: calc(var(--espacio) * 3) calc(var(--espacio) * 2) calc(var(--espacio) * 8);
    display: flex;
    flex-direction: column;
    gap: calc(var(--espacio) * 3);
}

.portal-encabezado {
    display: flex;
    flex-direction: column;
    gap: var(--espacio);
    padding: calc(var(--espacio) * 2) 0;
}

.portal-leyenda {
    font-size: var(--t-micro);
    color: var(--texto-tenue);
    text-align: center;
}

/* Pantallas centradas: login y carta de aceptacion. */
.centrado {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: calc(var(--espacio) * 3);
}

.centrado .card {
    width: 100%;
    max-width: 400px;
}

/* 13. Responsive ========================================================== */

@media (max-width: 960px) {
    .rejilla-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--espacio);
        padding-bottom: 88px;
    }

    .sidebar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
        flex-direction: row;
        align-items: center;
        gap: var(--espacio);
        height: auto;
        padding: var(--espacio);
        border-radius: var(--radio-card) var(--radio-card) 0 0;
        box-shadow: var(--sombra-alta);
        overflow-x: auto;
    }

    .sidebar-nav {
        flex-direction: row;
        gap: 4px;
    }

    .sidebar .marca span:last-child,
    .sidebar-pie,
    .nav-fase {
        display: none;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--espacio);
    }

    :root {
        --t-cifra: 36px;
        --t-titulo: 24px;
    }

    .tabla th:nth-child(2),
    .tabla td:nth-child(2) {
        display: none;
    }
}