@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
    --navy: #151934;
    --navy-soft: #1f2547;
    --gold: #C9A227;
    --gold-soft: #e6c96b;
    --paper: #F5F4F0;
    --ink: #1b1e2b;
    --gris: #6b6f80;
    --linea: #e4e2da;
    --radio: 14px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; margin: 0 0 4px; }
a { color: inherit; }

/* ---------- LOGIN ---------- */
.pagina-login { height: 100vh; }
.split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.split-imagen {
    background: linear-gradient(180deg, rgba(21,25,52,.55), rgba(21,25,52,.85)),
                radial-gradient(circle at 30% 20%, var(--navy-soft), var(--navy) 60%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
}
.marca-split { font-family: 'Fraunces', serif; font-size: 22px; letter-spacing: 4px; }
.split-imagen blockquote { font-family: 'Fraunces', serif; font-size: 28px; max-width: 380px; margin: 0; font-style: italic; }
.split-formulario { display: flex; align-items: center; justify-content: center; padding: 32px; }
.contenedor-formulario { width: 100%; max-width: 360px; }
.contenedor-formulario h1 { font-size: 30px; }
.subtitulo { color: var(--gris); margin: 0 0 28px; }
label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--gris); }
label span { display: block; margin-bottom: 6px; }
input, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
}
input:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.boton-primario {
    width: 100%;
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 13px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}
.boton-primario:hover { background: var(--navy-soft); }
.nota-pie { color: var(--gris); font-size: 13px; margin-top: 20px; }
.mensaje-error { background: #fdecec; color: #a3302f; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.mensaje-ok { background: #e8f3ec; color: #256a45; padding: 10px 14px; border-radius: 8px; font-size: 14px; }

@media (max-width: 760px) {
    .split { grid-template-columns: 1fr; }
    .split-imagen { display: none; }
}

/* ---------- APP LAYOUT ---------- */
.app-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.barra-lateral {
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 28px 20px;
}
.marca-lateral { font-family: 'Fraunces', serif; letter-spacing: 3px; font-size: 15px; margin-bottom: 36px; color: var(--gold-soft); }
.barra-lateral nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.barra-lateral nav a {
    text-decoration: none;
    color: rgba(255,255,255,.7);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}
.barra-lateral nav a.activo, .barra-lateral nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lateral-pie { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
.usuario-chip { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.enlace-salir { font-size: 13px; color: var(--gold-soft); text-decoration: none; }

.contenido-principal { padding: 40px 48px; max-width: 980px; }
.encabezado-pagina { margin-bottom: 32px; }
.encabezado-pagina h1 { font-size: 28px; }

.estado-vacio { background: #fff; border: 1px dashed var(--linea); border-radius: var(--radio); padding: 40px; text-align: center; color: var(--gris); }
.detalle-vacio { color: var(--gris); font-size: 14px; }

/* ---------- ANILLOS DE AVANCE (dashboard) ---------- */
.rejilla-anillos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 44px; }
.tarjeta-anillo { background: #fff; border-radius: var(--radio); padding: 24px; display: flex; align-items: center; gap: 18px; box-shadow: 0 1px 2px rgba(21,25,52,.06); }
.anillo {
    --avance: 0;
    width: 68px; height: 68px; border-radius: 50%;
    background: conic-gradient(var(--gold) calc(var(--avance) * 1%), var(--linea) 0);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.anillo::before { content: ''; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.anillo span { position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; }
.anillo-info h3 { font-size: 15px; margin-bottom: 2px; }
.etiqueta-fase { color: var(--gris); font-size: 13px; margin: 0; }

/* ---------- LEDGER (bitácora) ---------- */
.seccion-ledger h2 { font-size: 19px; margin-bottom: 18px; }
.ledger { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gold); }
.ledger li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 0 0 22px 20px; position: relative; }
.ledger li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.ledger time { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--gris); }
.ledger strong { display: block; font-size: 15px; }
.ledger-proyecto { font-size: 12px; color: var(--gris); }
.ledger p { margin: 4px 0 0; font-size: 14px; color: #3a3d4a; }

/* ---------- PROYECTOS (tarjetas) ---------- */
.rejilla-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.tarjeta-proyecto { background: #fff; border-radius: var(--radio); padding: 22px; box-shadow: 0 1px 2px rgba(21,25,52,.06); }
.tarjeta-proyecto h3 { font-size: 17px; margin: 10px 0 6px; }
.tarjeta-proyecto p { font-size: 14px; color: var(--gris); margin: 0 0 16px; min-height: 36px; }
.estado-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: .04em; }
.estado-activo { background: #eaf3ec; color: #2c7a4b; }
.estado-pausado { background: #faf1e0; color: #96690f; }
.estado-entregado { background: #e9eefb; color: #33518c; }
.barra-avance { height: 6px; background: var(--linea); border-radius: 100px; overflow: hidden; }
.barra-avance-relleno { height: 100%; background: var(--gold); }
.tarjeta-proyecto-pie { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris); margin-top: 10px; }

/* ---------- DOCUMENTOS ---------- */
.tabla-documentos { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radio); overflow: hidden; }
.tabla-documentos th, .tabla-documentos td { text-align: left; padding: 14px 18px; font-size: 14px; border-bottom: 1px solid var(--linea); }
.tabla-documentos th { color: var(--gris); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.enlace-descarga { color: var(--navy); font-weight: 600; text-decoration: none; }
.enlace-descarga:hover { color: var(--gold); }

/* ---------- MENSAJES ---------- */
.selector-proyecto { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.selector-proyecto a { text-decoration: none; padding: 8px 14px; border-radius: 100px; font-size: 13px; background: #fff; color: var(--gris); border: 1px solid var(--linea); }
.selector-proyecto a.activo { background: var(--navy); color: #fff; border-color: var(--navy); }
.hilo-mensajes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.mensaje-burbuja { max-width: 70%; padding: 12px 16px; border-radius: 14px; font-size: 14px; }
.mensaje-cliente { background: var(--navy); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.mensaje-equipo { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(21,25,52,.06); }
.mensaje-burbuja time { display: block; font-size: 11px; opacity: .6; margin-top: 6px; }
.formulario-mensaje { display: flex; gap: 10px; align-items: flex-end; }
.formulario-mensaje textarea { flex: 1; }
.formulario-mensaje button { width: auto; padding: 12px 22px; }

/* ---------- INSTALADOR ---------- */
.tarjeta-instalacion { max-width: 420px; margin: 60px auto; background: #fff; padding: 32px; border-radius: var(--radio); box-shadow: 0 1px 2px rgba(21,25,52,.08); }
.nota-seguridad { font-size: 13px; color: #96690f; background: #faf1e0; padding: 10px 14px; border-radius: 8px; }

@media (max-width: 860px) {
    .app-layout { grid-template-columns: 1fr; }
    .barra-lateral { flex-direction: row; align-items: center; padding: 14px 20px; }
    .barra-lateral nav { flex-direction: row; }
    .lateral-pie { display: none; }
    .contenido-principal { padding: 24px; }
}

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