/* ============================================================
   Facturas Mail — design system
   Escala espaciado 4/8 · radios 8/12/16 · paleta semántica
   ============================================================ */
:root {
  --primario: #4f46e5;
  --primario-hover: #4338ca;
  --primario-suave: #eef2ff;
  --exito: #059669;
  --exito-suave: #ecfdf5;
  --aviso: #b45309;
  --aviso-suave: #fffbeb;
  --peligro: #dc2626;
  --peligro-suave: #fef2f2;
  --info: #2563eb;
  --info-suave: #eff6ff;

  --tinta: #0f172a;
  --tinta-2: #334155;
  --tinta-3: #64748b;
  --tinta-4: #94a3b8;
  --borde: #e2e8f0;
  --borde-2: #cbd5e1;
  --fondo: #f1f5f9;
  --superficie: #ffffff;

  --sidebar-fondo: #0f172a;
  --sidebar-tinta: #94a3b8;
  --sidebar-activo: #eef2ff;

  --radio: 12px;
  --radio-2: 8px;
  --sombra: 0 1px 2px rgb(15 23 42 / .05), 0 2px 6px rgb(15 23 42 / .06);
  --sombra-2: 0 4px 14px rgb(15 23 42 / .10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; margin: 0; }
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- layout con sidebar ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--sidebar-fondo);
  color: var(--sidebar-tinta);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 18px;
  color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.01em;
}
.marca .logo-icono {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 4px 10px rgb(79 70 229 / .35);
}
.marca small { display: block; font-weight: 500; font-size: 11px; color: var(--sidebar-tinta); letter-spacing: .02em; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--sidebar-tinta); font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav a:hover { background: rgb(255 255 255 / .06); color: #e2e8f0; text-decoration: none; }
.nav a.activo {
  background: var(--sidebar-activo); color: var(--primario); font-weight: 600;
}
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-pie {
  border-top: 1px solid rgb(255 255 255 / .08);
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.usuario-chip { display: flex; align-items: center; gap: 9px; min-width: 0; }
.usuario-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.usuario-chip span { font-size: 13px; font-weight: 600; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salir-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid rgb(255 255 255 / .15); color: var(--sidebar-tinta);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer;
  transition: background .15s, color .15s;
}
.salir-btn:hover { background: rgb(255 255 255 / .08); color: #fff; }
.salir-btn svg { width: 14px; height: 14px; }

.main {
  flex: 1; min-width: 0;
  padding: 28px clamp(16px, 4vw, 40px) 60px;
}
.contenedor { max-width: 1080px; margin: 0 auto; }

/* ---------- cabecera de página ---------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.cabecera h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.cabecera .subtitulo { color: var(--tinta-3); font-size: 13.5px; margin-top: 2px; }

/* ---------- tarjetas ---------- */
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.card > h2 {
  font-size: 15.5px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.card > h2 svg { width: 17px; height: 17px; color: var(--primario); }

/* ---------- tarjetas de estadística ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 13px;
}
.stat .stat-icono {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
}
.stat .stat-icono svg { width: 19px; height: 19px; }
.stat .numero { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat .etiqueta { font-size: 12.5px; color: var(--tinta-3); font-weight: 500; }

.stat.verde .stat-icono { background: var(--exito-suave); color: var(--exito); }
.stat.azul .stat-icono { background: var(--info-suave); color: var(--info); }
.stat.naranja .stat-icono { background: var(--aviso-suave); color: var(--aviso); }
.stat.gris .stat-icono { background: #f1f5f9; color: var(--tinta-3); }
.stat.roja .stat-icono { background: var(--peligro-suave); color: var(--peligro); }

/* ---------- botones ---------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radio-2);
  border: 1px solid var(--borde-2);
  background: var(--superficie);
  color: var(--tinta-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
button:hover { background: #f8fafc; border-color: var(--tinta-4); }
button:active { background: #f1f5f9; }
button:disabled { opacity: .55; cursor: not-allowed; }
button svg { width: 15px; height: 15px; }

button.primario, .btn.primario {
  background: var(--primario); border-color: var(--primario); color: #fff;
  box-shadow: 0 1px 2px rgb(79 70 229 / .35);
}
button.primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
button.primario:active { background: #3730a3; }

button.peligro {
  background: var(--superficie); border-color: #fecaca; color: var(--peligro);
}
button.peligro:hover { background: var(--peligro-suave); border-color: #fca5a5; }

button.mini { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }

button.enlace, .enlace button {
  background: none; border: none; color: var(--primario);
  padding: 0; font-weight: 600;
}
button.enlace:hover, .enlace button:hover { text-decoration: underline; background: none; }

/* ---------- badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2.5px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: #f1f5f9; color: var(--tinta-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.pill.verde { background: var(--exito-suave); color: var(--exito); }
.pill.azul { background: var(--info-suave); color: var(--info); }
.pill.naranja { background: var(--aviso-suave); color: var(--aviso); }
.pill.roja { background: var(--peligro-suave); color: var(--peligro); }
.pill.gris { background: #f1f5f9; color: var(--tinta-3); }

/* ---------- tablas ---------- */
.tabla-marco {
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: auto;
  background: var(--superficie);
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  position: sticky; top: 0;
  background: #f8fafc;
  text-align: left;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f8fafc; }
td.apagado, .apagado { color: var(--tinta-3); }
td .mono-ruta { font-size: 12px; color: var(--tinta-3); word-break: break-all; }

/* ---------- formularios ---------- */
form { margin: 0; }
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px;
  align-items: start;
}
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.ancho-total { grid-column: 1 / -1; }
label, .campo > label {
  font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
label .apagado, label small { font-weight: 400; color: var(--tinta-4); font-size: 11.5px; }
input, select, textarea {
  font: inherit; font-size: 14px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--borde-2);
  border-radius: var(--radio-2);
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--tinta-4); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgb(79 70 229 / .14);
}
textarea { resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alineado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.rejilla .alineado, .rejilla button[type="submit"] { grid-column: 1 / -1; justify-self: start; }

/* ---------- avisos (flash) ---------- */
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px; font-weight: 500;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.flash.ok { background: var(--exito-suave); color: #065f46; border-color: #a7f3d0; }
.flash.error { background: var(--peligro-suave); color: #991b1b; border-color: #fecaca; }
.flash.info { background: var(--info-suave); color: #1e40af; border-color: #bfdbfe; }

/* ---------- registro (logs) ---------- */
.registro, .log, .salida {
  background: #0f172a;
  color: #cbd5e1;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  overflow-x: auto;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.registro .linea { padding: 1px 0; }
.registro .hora { color: #64748b; }
.registro .nivel-error { color: #f87171; font-weight: 700; }
.registro .nivel-aviso { color: #fbbf24; font-weight: 700; }
.registro .nivel-info { color: #34d399; }
.salida:empty { display: none; }

/* ---------- detalles (editar) ---------- */
details { border: 1px solid var(--borde); border-radius: 10px; background: #f8fafc; }
details summary {
  cursor: pointer; padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: var(--tinta-2);
  list-style: none; display: flex; align-items: center; gap: 8px;
  border-radius: 10px;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid var(--tinta-4); border-bottom: 2px solid var(--tinta-4);
  transform: rotate(-45deg); transition: transform .15s;
}
details[open] summary::before { transform: rotate(45deg); }
details summary:hover { color: var(--primario); }
details > *:not(summary) { padding: 0 14px 14px; }
details .rejilla { padding-top: 12px; }

/* ---------- nube (navegador Nextcloud) ---------- */
.migas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px; font-size: 13px;
}
.migas .miga {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 5px 11px;
  color: var(--tinta-2); font-weight: 500;
  transition: border-color .15s, color .15s, background .15s;
}
.migas .miga:hover { border-color: var(--primario); color: var(--primario); text-decoration: none; }
.migas .miga.actual { background: var(--primario-suave); border-color: #c7d2fe; color: var(--primario); font-weight: 600; }
.migas .sep { color: var(--tinta-4); }

.fila-carpeta svg, .icono-fichero { width: 17px; height: 17px; }
td .nombre-entrada { display: inline-flex; align-items: center; gap: 9px; }
td .nombre-entrada svg { width: 17px; height: 17px; flex-shrink: 0; }
td .nombre-entrada.carpeta svg { color: var(--primario); }
td .nombre-entrada.fichero svg { color: var(--tinta-4); }

/* ---------- celda documento (importaciones) ---------- */
.celda-doc { max-width: 380px; }
.celda-doc strong { display: block; font-weight: 600; }
.doc-sub {
  display: block;
  font-size: 12px;
  color: var(--tinta-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
td.sin-salto { white-space: nowrap; }

/* ---------- estados vacíos ---------- */
.vacio {
  text-align: center;
  padding: 34px 20px;
  color: var(--tinta-3);
}
.vacio svg { width: 40px; height: 40px; color: var(--tinta-4); margin-bottom: 10px; }
.vacio p { margin: 0; font-size: 14px; }
.vacio .titulo { font-weight: 600; color: var(--tinta-2); margin-bottom: 3px; }

/* ---------- línea de estado (última revisión) ---------- */
.estado-linea {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px;
}
.punto {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--exito);
  box-shadow: 0 0 0 3px var(--exito-suave);
}

/* ---------- login ---------- */
body.login-pagina {
  background:
    radial-gradient(1200px 500px at 20% -10%, rgb(99 102 241 / .25), transparent 60%),
    radial-gradient(1000px 500px at 90% 110%, rgb(79 70 229 / .18), transparent 60%),
    #0f172a;
  display: grid; place-items: center;
  min-height: 100vh;
  padding: 24px;
}
.card.login {
  width: 100%; max-width: 400px;
  padding: 34px 32px 30px;
  text-align: center;
  box-shadow: var(--sombra-2);
}
.card.login .logo-icono {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 20px rgb(79 70 229 / .35);
}
.card.login .logo-icono svg { width: 26px; height: 26px; }
.card.login h1 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.card.login .apagado { font-size: 13px; margin: 0 0 18px; }
.card.login form { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.card.login label { margin-top: 10px; }
.card.login button[type="submit"] {
  margin-top: 20px; width: 100%;
  background: var(--primario); border-color: var(--primario); color: #fff;
  padding: 10px 14px; font-size: 14.5px;
  box-shadow: 0 1px 2px rgb(79 70 229 / .35);
}
.card.login button[type="submit"]:hover { background: var(--primario-hover); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 40;
    flex-direction: column;
    box-shadow: var(--sombra-2);
  }
  .marca { padding: 12px 16px 8px; }
  .nav {
    flex-direction: row; overflow-x: auto;
    padding: 6px 10px 10px; gap: 6px;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 12px; white-space: nowrap; font-size: 13.5px; }
  .sidebar-pie { display: none; }
  .main { padding: 20px 14px 50px; }
  .cabecera h1 { font-size: 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* utilidades sueltas que conservan las plantillas */
.oculto { display: none; }
.mt-0 { margin-top: 0; }