/* ============================================================
   HydroFrame CDE — Sistema de diseño
   ------------------------------------------------------------
   Concepto: un plano técnico digital. La paleta viene del azul
   de los planos de construcción impresos (cianotipo), el papel
   envejecido de un plano real, y el rojo de un sello oficial —
   coherente con ser un sistema de gestión documental para el
   Estado peruano. La tipografía combina una técnica/geométrica
   para títulos con una monoespaciada para códigos y nomenclatura
   (los nombres de archivo SON código, deben leerse como tal).
   ============================================================ */

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

:root {
  /* Color */
  --azul-plano: #0b2e4a;
  --azul-plano-2: #123a5c;
  --azul-plano-3: #1c4a70;
  --cian-linea: #6fb7db;
  --cian-linea-tenue: rgba(111, 183, 219, 0.16);
  --papel: #f4f1e8;
  --papel-alto: #fbfaf5;
  --tinta: #1b2430;
  --tinta-suave: #5b6b7a;
  --sello: #a6402d;
  --sello-tenue: rgba(166, 64, 45, 0.1);

  /* Estados del CDE — cada uno con su color funcional, no decorativo */
  --wip: #c9962c;
  --wip-tenue: rgba(201, 150, 44, 0.14);
  --shared: #2a9d8f;
  --shared-tenue: rgba(42, 157, 143, 0.14);
  --published: #2f8f4e;
  --published-tenue: rgba(47, 143, 78, 0.14);
  --archived: #6b7280;
  --archived-tenue: rgba(107, 114, 128, 0.14);

  /* Tipografía */
  --f-display: 'Space Grotesk', -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --f-texto: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* Espaciado y forma */
  --radio: 3px;
  --sombra-panel: 0 1px 2px rgba(11, 46, 74, 0.06), 0 8px 24px -12px rgba(11, 46, 74, 0.35);
  --transicion: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f-texto);
  color: var(--papel);
  background-color: var(--azul-plano);
  background-image:
    linear-gradient(var(--cian-linea-tenue) 1px, transparent 1px),
    linear-gradient(90deg, var(--cian-linea-tenue) 1px, transparent 1px);
  background-size: 32px 32px;
  min-height: 100vh;
}

.mono { font-family: var(--f-mono); }

a, button, input, select { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--cian-linea);
  outline-offset: 2px;
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radio);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.btn-primario { background: var(--cian-linea); color: var(--azul-plano-osc, #0a2438); }
.btn-primario:hover { background: #8ec8e6; }
.btn-primario:disabled { opacity: 0.5; cursor: default; }
.btn-secundario { background: transparent; color: var(--papel); border: 1px solid rgba(244, 241, 232, 0.35); }
.btn-secundario:hover { border-color: var(--cian-linea); color: var(--cian-linea); }
.btn-fantasma { background: transparent; color: var(--tinta-suave); padding: 4px 8px; font-weight: 500; font-size: 13px; }
.btn-fantasma:hover { color: var(--azul-plano); }

/* ---------- encabezado ---------- */
.app-header {
  padding: 20px 32px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgba(244, 241, 232, 0.15);
}
.app-header .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cian-linea);
}
.app-header h1 {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.barra-usuario { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; }
.barra-usuario .rol {
  font-family: var(--f-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--cian-linea);
  border: 1px solid rgba(111, 183, 219, 0.4); border-radius: 20px; padding: 2px 10px;
}

/* ---------- panel base (estilo "hoja de plano") ---------- */
.panel {
  background: var(--papel-alto);
  color: var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-panel);
  position: relative;
  padding: 24px;
}
/* marcas de esquina — referencian las marcas de registro de un plano impreso */
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--azul-plano);
  opacity: 0.45;
  pointer-events: none;
}
.panel::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.panel::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.panel h3 {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-suave);
  margin: 0 0 16px;
}

/* ---------- vacío / carga ---------- */
.estado-vacio {
  text-align: center;
  padding: 36px 16px;
  color: var(--tinta-suave);
  font-size: 13.5px;
  line-height: 1.5;
}
.estado-vacio strong { display: block; color: var(--tinta); font-family: var(--f-display); font-size: 15px; margin-bottom: 4px; }

.cargando { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); font-size: 13px; padding: 16px 0; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--cian-linea-tenue); border-top-color: var(--azul-plano-3);
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- badges de estado (el "sello") ---------- */
.sello {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  border: 1.5px solid transparent;
}
.sello-WIP { background: var(--wip-tenue); color: #8a6a1c; border-color: rgba(201,150,44,0.4); }
.sello-SHARED { background: var(--shared-tenue); color: #1d6e64; border-color: rgba(42,157,143,0.4); }
.sello-PUBLISHED { background: var(--published-tenue); color: #216638; border-color: rgba(47,143,78,0.4); }
.sello-ARCHIVED { background: var(--archived-tenue); color: #4b5157; border-color: rgba(107,114,128,0.4); }

/* ---------- toasts ---------- */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--tinta); color: var(--papel-alto);
  font-size: 13px; padding: 12px 16px; border-radius: var(--radio);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  animation: entrar-toast 220ms ease;
  max-width: 320px;
}
.toast.error { background: var(--sello); }
@keyframes entrar-toast { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }