/* =====================================================================
   ContaMás CRM — sistema de diseño
   Paleta: verde libro-mayor + sello dorado. Tipografía: Source Serif 4
   para titulares (encabezados de "libro contable"), Inter para todo lo
   demás (datos, formularios, tablas).
   ===================================================================== */

:root {
    --tinta: #1C2B29;
    --tinta-suave: #4B5D5A;
    --papel: #F7F8F5;
    --papel-panel: #FFFFFF;
    --linea: #DDE4DD;
    --verde-mayor: #0F5257;
    --verde-mayor-oscuro: #0B3E42;
    --verde-mayor-claro: #E4EEEC;
    --sello-oro: #B9832E;
    --sello-oro-claro: #F5E9D3;
    --alerta: #C1443C;
    --alerta-claro: #FBE7E5;
    --exito: #3F7D58;
    --exito-claro: #E5F0E8;
    --radio: 6px;
    --sombra: 0 1px 2px rgba(28, 43, 41, 0.06), 0 1px 1px rgba(28, 43, 41, 0.04);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; margin: 0; color: var(--verde-mayor-oscuro); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 0.5em; }
a { color: var(--verde-mayor); }
.texto-suave { color: var(--tinta-suave); }

/* ---------- estructura general de la app ---------- */
.app-envoltura { display: flex; min-height: 100vh; }

.barra-lateral {
    width: 240px;
    flex-shrink: 0;
    background: var(--verde-mayor-oscuro);
    color: #EAF2F0;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}

.marca-lateral { display: flex; align-items: center; gap: 12px; padding: 0 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 12px; }
.marca-logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; display: block; }
.marca-logo-grande { width: 64px; height: 64px; margin-bottom: 18px; }
.marca-lateral strong { display: block; font-size: 0.95rem; color: #fff; }
.marca-lateral span { display: block; font-size: 0.75rem; color: #A9C3BE; }

.nav-lateral { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1; }
.nav-lateral a {
    display: block; padding: 10px 12px; border-radius: var(--radio);
    color: #CFE3DF; text-decoration: none; font-size: 0.92rem; font-weight: 500;
}
.nav-lateral a:hover { background: rgba(255,255,255,0.08); }
.nav-lateral a.activo { background: var(--sello-oro); color: #2A1D08; }

.usuario-lateral { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; }
.usuario-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.usuario-info { flex: 1; min-width: 0; }
.usuario-info strong { display: block; font-size: 0.85rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-info span { font-size: 0.72rem; color: #A9C3BE; }
.enlace-salir { font-size: 0.78rem; color: #E8B98A; text-decoration: none; }
.enlace-salir:hover { text-decoration: underline; }

.contenido-principal { flex: 1; padding: 32px 40px; max-width: 1180px; }

.encabezado-pagina { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.ojo-encabezado { color: var(--tinta-suave); font-size: 0.85rem; margin: 0 0 2px; }

/* ---------- botones ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; border-radius: var(--radio); border: 1px solid transparent;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.boton-primario { background: var(--verde-mayor); color: #fff; }
.boton-primario:hover { background: var(--verde-mayor-oscuro); }
.boton-secundario { background: #fff; color: var(--verde-mayor-oscuro); border-color: var(--linea); }
.boton-secundario:hover { background: var(--verde-mayor-claro); }
.boton-peligro { background: #fff; color: var(--alerta); border-color: #EFC9C6; }
.boton-peligro:hover { background: var(--alerta-claro); }
.boton-ancho { width: 100%; }
.boton-chico { padding: 6px 12px; font-size: 0.8rem; }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- métricas del dashboard ---------- */
.rejilla-metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.rejilla-metricas-dinero { grid-template-columns: repeat(2, 1fr); }
.tarjeta-metrica {
    background: var(--papel-panel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sombra);
}
.tarjeta-metrica-acento { border-left: 4px solid var(--alerta); }
.metrica-valor { font-family: 'Source Serif 4', serif; font-size: 2rem; font-weight: 600; color: var(--verde-mayor-oscuro); line-height: 1; }
.metrica-valor-dinero { font-size: 1.6rem; }
.metrica-etiqueta { font-size: 0.85rem; color: var(--tinta-suave); }
.metrica-nota { font-size: 0.76rem; color: var(--sello-oro); font-weight: 600; }
.tarjeta-dinero { border-left: 4px solid var(--sello-oro); }

/* ---------- paneles y tablas ---------- */
.panel { background: var(--papel-panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 24px; box-shadow: var(--sombra); margin-bottom: 20px; }
.panel-encabezado { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.enlace-suave { font-size: 0.85rem; text-decoration: none; }

table.tabla-simple, table.tabla-clientes { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla-simple th, .tabla-clientes th {
    text-align: left; font-size: 0.72rem; text-transform: none; letter-spacing: 0.02em;
    color: var(--tinta-suave); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--linea);
    white-space: nowrap;
}
.tabla-simple td, .tabla-clientes td { padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-clientes tbody tr:hover { background: var(--verde-mayor-claro); }

/* ---------- etiquetas de estado (sello) ---------- */
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.etiqueta-exito { background: var(--exito-claro); color: var(--exito); }
.etiqueta-peligro { background: var(--alerta-claro); color: var(--alerta); }
.etiqueta-alerta { background: var(--sello-oro-claro); color: var(--sello-oro); }
.etiqueta-neutra { background: #EDEFEC; color: var(--tinta-suave); }
.etiqueta-oro { background: var(--sello-oro-claro); color: #7A5A1E; border: 1px solid #E3C481; }

/* ---------- avisos ---------- */
.aviso { padding: 10px 14px; border-radius: var(--radio); font-size: 0.85rem; margin-bottom: 14px; }
.aviso-error { background: var(--alerta-claro); color: var(--alerta); }
.aviso-exito { background: var(--exito-claro); color: var(--exito); }

/* ---------- barra de filtros de clientes ---------- */
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.barra-filtros input[type="search"], .barra-filtros select {
    padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
    font-family: inherit; font-size: 0.85rem; background: #fff; color: var(--tinta);
}
.barra-filtros input[type="search"] { flex: 1; min-width: 200px; }
.contador-resultados { font-size: 0.8rem; color: var(--tinta-suave); margin-bottom: 10px; }

/* ---------- formularios / modal ---------- */
label { display: block; font-size: 0.82rem; font-weight: 600; margin: 14px 0 5px; color: var(--tinta-suave); }
label:first-of-type { margin-top: 0; }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
    font-family: inherit; font-size: 0.9rem; color: var(--tinta); background: #fff;
}
textarea { resize: vertical; min-height: 70px; }
.fila-formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.fondo-modal {
    position: fixed; inset: 0; background: rgba(20, 30, 28, 0.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
    overflow-y: auto; z-index: 50;
}
.fondo-modal.oculto { display: none; }
.modal {
    background: #fff; border-radius: 10px; padding: 26px 28px; width: 100%; max-width: 640px;
    box-shadow: 0 12px 32px rgba(11, 62, 66, 0.25);
}
.modal-encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cerrar-modal { background: none; border: none; font-size: 1.3rem; color: var(--tinta-suave); cursor: pointer; line-height: 1; }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- páginas de login ---------- */
.pagina-login { background: var(--verde-mayor-oscuro); }
.login-envoltura { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-envoltura-simple { grid-template-columns: 1fr; place-items: center; }
.login-panel-marca {
    background: linear-gradient(160deg, var(--verde-mayor-oscuro), #0A2E31 85%);
    color: #EAF2F0; display: flex; align-items: center; padding: 60px;
}
.login-marca-contenido .marca-isotipo { width: 56px; height: 56px; font-size: 1.3rem; margin-bottom: 18px; }
.login-marca-contenido h1 { color: #fff; font-size: 2.2rem; margin-bottom: 6px; }
.login-marca-contenido p { color: #B9D3CD; font-size: 1rem; }
.login-cita { margin-top: 48px; border-left: 3px solid var(--sello-oro); padding-left: 16px; max-width: 340px; }
.login-cita p { font-family: 'Source Serif 4', serif; font-style: italic; color: #CFE3DF; font-size: 1.02rem; }
.login-panel-formulario { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--papel); }
.tarjeta-login { background: #fff; border-radius: 10px; padding: 36px 34px; width: 100%; max-width: 360px; box-shadow: var(--sombra); border: 1px solid var(--linea); }
.tarjeta-login h2 { margin-bottom: 4px; }

/* ---------- calendario de vencimientos ---------- */
.calendario-envoltura { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.calendario-controles { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.calendario-controles h2 { min-width: 160px; text-align: center; }
.calendario-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--tinta-suave); margin-bottom: 14px; }
.calendario-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.punto-peligro { background: var(--alerta); }
.punto-alerta { background: var(--sello-oro); }
.punto-exito { background: var(--exito); }

.calendario-encabezados-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.calendario-encabezados-dias span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--tinta-suave); }

.calendario-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.celda-dia {
    aspect-ratio: 1 / 1; border: 1px solid var(--linea); border-radius: var(--radio);
    background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; cursor: pointer; font-family: inherit; padding: 4px; position: relative;
}
.celda-dia:hover { background: var(--verde-mayor-claro); }
.celda-vacia { visibility: hidden; cursor: default; border: none; }
.celda-numero { font-size: 0.85rem; font-weight: 600; color: var(--tinta); }
.celda-contador { position: absolute; top: 4px; right: 6px; font-size: 0.65rem; font-weight: 700; color: var(--sello-oro); }
.celda-puntos { display: flex; gap: 3px; }
.celda-hoy { border-color: var(--verde-mayor); border-width: 2px; }
.celda-seleccionada { background: var(--verde-mayor); }
.celda-seleccionada .celda-numero { color: #fff; }
.celda-seleccionada:hover { background: var(--verde-mayor-oscuro); }

.calendario-detalle { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; position: sticky; top: 20px; }
.calendario-detalle h2 { font-size: 1.05rem; margin-bottom: 6px; }
.lista-detalle-dia { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-detalle-dia li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.lista-detalle-dia li div { display: flex; flex-direction: column; }
.lista-detalle-dia li strong { font-size: 0.88rem; }
.lista-detalle-dia li span.texto-suave { font-size: 0.76rem; }

@media (max-width: 900px) {
    .login-envoltura { grid-template-columns: 1fr; }
    .login-panel-marca { display: none; }
    .rejilla-metricas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .app-envoltura { flex-direction: column; }
    .barra-lateral { width: 100%; flex-direction: row; align-items: center; padding: 12px 16px; overflow-x: auto; }
    .marca-lateral, .usuario-lateral { display: none; }
    .nav-lateral { flex-direction: row; padding: 0; }
    .contenido-principal { padding: 20px; }
    .rejilla-metricas, .fila-formulario { grid-template-columns: 1fr; }
    .calendario-envoltura { grid-template-columns: 1fr; }
}