/* ============================================================
   eFactura · Hoja de estilos propia (sin dependencias externas)
   ============================================================ */
:root {
    --acc: #1a56db;
    --acc-oscuro: #1e429f;
    --acc-suave: #ebf1fe;
    --ok: #059669; --ok-bg: #ecfdf5;
    --warn: #d97706; --warn-bg: #fffbeb;
    --err: #dc2626; --err-bg: #fef2f2;
    --gris: #6b7280;
    --txt: #1f2937;
    --borde: #e5e7eb;
    --bg: #f5f6f8;
    --lado: #111827;
    --lado-txt: #9ca3af;
    --radio: 10px;
    --sombra: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px; color: var(--txt); background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Estructura ---------------- */
.app { display: flex; min-height: 100vh; }
.lado {
    width: 232px; background: var(--lado); color: var(--lado-txt);
    flex-shrink: 0; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.lado .marca {
    padding: 20px 20px 16px; color: #fff; font-size: 19px; font-weight: 700;
    letter-spacing: .5px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.lado .marca small { display:block; color: var(--lado-txt); font-size: 11px; font-weight: 400; margin-top: 2px; }
.lado nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.lado .grupo { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 14px 12px 6px; color: #4b5563; }
.lado a.item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin: 1px 0; border-radius: 8px;
    color: var(--lado-txt); font-size: 13.5px; text-decoration: none;
    transition: background .12s, color .12s;
}
.lado a.item:hover { background: rgba(255,255,255,.06); color: #fff; }
.lado a.item.activo { background: var(--acc); color: #fff; }
.lado a.item svg { width: 17px; height: 17px; flex-shrink: 0; }
.lado .pie-lado { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.lado .pie-lado a { color: var(--lado-txt); }
.lado .pie-lado a:hover { color: #fff; text-decoration: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera {
    background: #fff; border-bottom: 1px solid var(--borde);
    padding: 14px 28px; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 40;
}
.cabecera h1 { font-size: 19px; margin: 0; font-weight: 650; }
.cabecera .acciones { display: flex; gap: 10px; align-items: center; }
.usuario-chip { display: flex; align-items: center; gap: 8px; color: var(--gris); font-size: 13px; }
.usuario-chip .avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--acc-suave); color: var(--acc);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.contenido { padding: 24px 28px 60px; max-width: 1280px; width: 100%; }

/* ---------------- Tarjetas ---------------- */
.tarjeta { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 20px; }
.tarjeta .tit { padding: 16px 20px; border-bottom: 1px solid var(--borde); font-weight: 650; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.tarjeta .cuerpo { padding: 20px; }
.tarjeta.sin-borde .cuerpo { padding: 0; }

/* KPIs del panel */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; }
.kpi .etq { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--gris); }
.kpi .valor { font-size: 24px; font-weight: 700; margin-top: 6px; }
.kpi .valor.ok { color: var(--ok); } .kpi .valor.err { color: var(--err); } .kpi .valor.acc { color: var(--acc); } .kpi .valor.warn { color: var(--warn); }
.kpi .sub { font-size: 12px; color: var(--gris); margin-top: 2px; }

/* ---------------- Botones ---------------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--acc); color: #fff; border: 1px solid transparent;
    padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-decoration: none; line-height: 1.3; transition: background .12s;
    font-family: inherit;
}
.btn:hover { background: var(--acc-oscuro); text-decoration: none; color:#fff; }
.btn svg { width: 15px; height: 15px; }
.btn.sec { background: #fff; color: var(--txt); border-color: #d1d5db; }
.btn.sec:hover { background: #f9fafb; }
.btn.peligro { background: var(--err); }
.btn.peligro:hover { background: #b91c1c; }
.btn.ok { background: var(--ok); }
.btn.ok:hover { background: #047857; }
.btn.mini { padding: 5px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------- Formularios ---------------- */
label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #374151; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=file], select, textarea {
    width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; font-family: inherit; color: var(--txt); background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
input.err, select.err { border-color: var(--err); }
textarea { resize: vertical; min-height: 70px; }
.campo { margin-bottom: 16px; }
.campo .ayuda { font-size: 12px; color: var(--gris); margin-top: 4px; }
.fila { display: flex; gap: 16px; flex-wrap: wrap; }
.fila > .campo { flex: 1; min-width: 160px; }
.check-linea { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; margin: 10px 0; cursor: pointer; }
.check-linea input { width: auto; }

/* ---------------- Tablas ---------------- */
.tabla-scroll { overflow-x: auto; }
table.listado { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.listado th {
    text-align: left; padding: 11px 16px; background: #f9fafb; color: var(--gris);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--borde); white-space: nowrap;
}
table.listado td { padding: 11px 16px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
table.listado tr:hover td { background: #fafbff; }
table.listado tr:last-child td { border-bottom: 0; }
table.listado .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.listado a.fila-link { color: var(--txt); font-weight: 600; }
table.listado a.fila-link:hover { color: var(--acc); }
.vacio { text-align: center; color: var(--gris); padding: 48px 20px; }
.vacio .grande { font-size: 38px; margin-bottom: 8px; opacity: .5; }

/* Insignias de estado */
.insignia { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.insignia.gris { background: #f3f4f6; color: var(--gris); }
.insignia.azul { background: var(--acc-suave); color: var(--acc); }
.insignia.verde { background: var(--ok-bg); color: var(--ok); }
.insignia.ambar { background: var(--warn-bg); color: var(--warn); }
.insignia.roja { background: var(--err-bg); color: var(--err); }

/* Barra de filtros sobre listados */
.filtros { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; align-items: center; }
.filtros input, .filtros select { width: auto; }
.filtros .buscar { flex: 1; min-width: 200px; }

/* Paginacion */
.paginacion { display: flex; gap: 6px; padding: 14px 16px; justify-content: flex-end; align-items: center; font-size: 13px; color: var(--gris); }
.paginacion a, .paginacion span.actual {
    padding: 5px 11px; border-radius: 6px; border: 1px solid var(--borde); background: #fff; color: var(--txt); text-decoration: none;
}
.paginacion span.actual { background: var(--acc); color: #fff; border-color: var(--acc); }
.paginacion a:hover { border-color: var(--acc); color: var(--acc); }

/* ---------------- Avisos y toasts ---------------- */
.aviso { padding: 12px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid; }
.aviso.ok { background: var(--ok-bg); color: var(--ok); border-color: #a7f3d0; }
.aviso.error { background: var(--err-bg); color: var(--err); border-color: #fecaca; }
.aviso.warn { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; }
.aviso.info { background: var(--acc-suave); color: var(--acc); border-color: #c3d4fb; }

#toasts { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: #111827; color: #fff; padding: 12px 18px; border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.2); font-size: 13.5px; min-width: 240px; max-width: 380px;
    animation: toast-in .25s ease; display: flex; gap: 10px; align-items: center;
}
.toast.ok { background: var(--ok); } .toast.error { background: var(--err); }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- Editor de lineas de factura ---------------- */
table.lineas { width: 100%; border-collapse: collapse; }
table.lineas th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--gris); padding: 6px 8px; letter-spacing: .5px; }
table.lineas td { padding: 4px 4px; vertical-align: top; }
table.lineas input, table.lineas select, table.lineas textarea { padding: 7px 9px; font-size: 13.5px; }
table.lineas textarea { min-height: 38px; }
table.lineas .importe-linea { text-align: right; font-variant-numeric: tabular-nums; padding-top: 12px; font-weight: 600; white-space: nowrap; }
table.lineas .quitar { color: var(--err); cursor: pointer; font-size: 18px; padding: 8px 6px; background:none; border:none; line-height:1; }
table.lineas .quitar:hover { transform: scale(1.15); }

.totales-doc { margin-left: auto; width: 320px; font-size: 14px; }
.totales-doc .linea-total { display: flex; justify-content: space-between; padding: 5px 0; color: var(--gris); }
.totales-doc .linea-total .val { font-variant-numeric: tabular-nums; color: var(--txt); }
.totales-doc .gran-total { border-top: 2px solid var(--acc); margin-top: 6px; padding-top: 10px; font-size: 18px; font-weight: 700; color: var(--acc); display: flex; justify-content: space-between; }

/* ---------------- Modal ---------------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; }
.modal { background: #fff; border-radius: 12px; max-width: 560px; width: 100%; box-shadow: 0 25px 50px rgba(0,0,0,.25); animation: toast-in .2s ease; max-height: 85vh; overflow-y: auto; }
.modal .tit { padding: 16px 20px; border-bottom: 1px solid var(--borde); font-weight: 650; display: flex; justify-content: space-between; }
.modal .tit .cerrar { cursor: pointer; color: var(--gris); background: none; border: none; font-size: 20px; line-height: 1; }
.modal .cuerpo { padding: 20px; }
.modal .pie { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 10px; }
.oculto { display: none !important; }

/* ---------------- Login ---------------- */
body.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(150deg, #111827 0%, #1e3a8a 100%); }
.caja-login { background: #fff; border-radius: 14px; padding: 36px; width: 100%; max-width: 400px; box-shadow: 0 25px 60px rgba(0,0,0,.35); }
.caja-login .logo { font-size: 26px; font-weight: 800; color: var(--acc); text-align: center; margin-bottom: 4px; letter-spacing: .5px; }
.caja-login .sub { text-align: center; color: var(--gris); font-size: 13px; margin-bottom: 26px; }

/* ---------------- Utilidades ---------------- */
.mut { color: var(--gris); } .peque { font-size: 12px; }
.derecha { text-align: right; } .centro { text-align: center; }
.mb0 { margin-bottom: 0; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.flex { display: flex; gap: 10px; align-items: center; } .crece { flex: 1; }
.sep { height: 1px; background: var(--borde); margin: 18px 0; }

/* Responsive */
@media (max-width: 900px) {
    .lado { position: fixed; left: -240px; transition: left .2s; z-index: 90; }
    .lado.abierto { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .btn-menu { display: inline-flex !important; }
    .contenido { padding: 16px; }
    .cabecera { padding: 12px 16px; }
    .totales-doc { width: 100%; }
}
.btn-menu { display: none; background: none; border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; cursor: pointer; }

@media print {
    .lado, .cabecera, .filtros, .paginacion, .btn { display: none !important; }
    .contenido { padding: 0; max-width: none; }
    body { background: #fff; }
    .tarjeta { box-shadow: none; }
}