:root {
    --verde-profundo: #1F4B3F;
    --verde-suave: #E8F0EC;
    --ambar: #C97A2B;
    --ambar-suave: #FBEEDD;
    --fondo: #F7F6F3;
    --texto: #1B1F1D;
    --texto-secundario: #5B655F;
    --borde: #D8DDD9;
    --blanco: #FFFFFF;
    --peligro: #B3261E;
    --peligro-suave: #FBE9E7;
    --exito: #2E6B3E;
    --exito-suave: #E7F3E9;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    font-size: 16px;
    line-height: 1.5;
}
.topbar {
    background: var(--verde-profundo);
    color: var(--blanco);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.topbar .marca { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.topbar nav { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar nav a { color: var(--blanco); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.topbar nav a:hover, .topbar nav a.activo { background: rgba(255,255,255,0.15); }
.topbar .usuario { font-size: 13px; opacity: 0.9; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.topbar .usuario a { color: var(--blanco); }
.contenedor { max-width: 1000px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 24px 0 12px; }
.subtitulo { color: var(--texto-secundario); font-size: 14px; margin-bottom: 20px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; }
.stat .numero { font-size: 28px; font-weight: 700; color: var(--verde-profundo); }
.stat .etiqueta { font-size: 13px; color: var(--texto-secundario); }
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=password], input[type=date], input[type=tel], select, textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 16px; background: var(--blanco); color: var(--texto); font-family: inherit;
}
textarea { min-height: 80px; resize: vertical; }
.ayuda { font-size: 12px; color: var(--texto-secundario); margin-top: 3px; }
.checklist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.checklist label {
    display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0;
    background: var(--verde-suave); padding: 8px 12px; border-radius: 20px; font-size: 13px; cursor: pointer;
}
.checklist input { width: auto; }
.btn {
    display: inline-block; background: var(--verde-profundo); color: var(--blanco); border: none;
    padding: 12px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;
    text-decoration: none; text-align: center;
}
.btn:hover { opacity: 0.92; }
.btn.secundario { background: var(--blanco); color: var(--verde-profundo); border: 1px solid var(--verde-profundo); }
.btn.peligro { background: var(--peligro); }
.btn.ambar { background: var(--ambar); }
.btn.chico { padding: 7px 12px; font-size: 13px; border-radius: 6px; }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 20px; font-weight: 600; display: inline-block; }
.pill.activo { background: var(--exito-suave); color: var(--exito); }
.pill.retirado { background: var(--peligro-suave); color: var(--peligro); }
.pill.neutro { background: var(--verde-suave); color: var(--verde-profundo); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); }
th { color: var(--texto-secundario); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: var(--verde-suave); }
.alerta { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.alerta.error { background: var(--peligro-suave); color: var(--peligro); }
.alerta.exito { background: var(--exito-suave); color: var(--exito); }
.fila { display: flex; gap: 12px; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 200px; }
.login-caja { max-width: 380px; margin: 12vh auto; background: var(--blanco); border-radius: 14px; padding: 32px 28px; border: 1px solid var(--borde); }
.buscador { position: relative; }
.buscador .resultados {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--blanco);
    border: 1px solid var(--borde); border-top: none; border-radius: 0 0 8px 8px;
    max-height: 200px; overflow-y: auto; z-index: 10; display: none;
}
.buscador .resultados div { padding: 10px 12px; cursor: pointer; font-size: 14px; }
.buscador .resultados div:hover { background: var(--verde-suave); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { background: var(--ambar-suave); color: var(--ambar); padding: 5px 10px; border-radius: 20px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.chip button { background: none; border: none; color: var(--ambar); cursor: pointer; font-weight: 700; padding: 0; }
@media (max-width: 640px) {
    .topbar { flex-direction: column; align-items: flex-start; }
    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    tr { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 10px; padding: 8px; background: var(--blanco); }
    td { border: none; padding: 6px 4px; }
    td::before { content: attr(data-etiqueta); font-size: 11px; color: var(--texto-secundario); display: block; text-transform: uppercase; }
}