/* Lo que Tailwind por CDN no cubre bien: el rail con tooltips, la animación
   del panel derecho, y unas clases de formulario para no repetir 20 utilidades
   en cada input. Todo lo demás es Tailwind en el HTML.

   Los colores salen de variables que pinta layout.php con la marca del perfil
   (--m1 claro, --m2 medio, --m3 oscuro, --n1/--n2 el navy del rail). Así el
   mismo archivo sirve para los cuatro semáforos. */

:root {
  --m1: #00AEFE; --m2: #007EE3; --m3: #0069D7;
  --n1: #0b1a33; --n2: #04102a;
}

.app { display: grid; grid-template-columns: 84px minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 0; background: linear-gradient(180deg, var(--n1) 0%, var(--n2) 100%);
}
.rail-logo {
  width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--m1), var(--m3)); color: #fff; font-weight: 800; font-size: 22px;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.rail-btn {
  position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: rgba(255,255,255,.55); transition: background .15s, color .15s;
}
.rail-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.rail-btn.activo { background: linear-gradient(135deg, var(--m2), var(--m3)); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.30); }
.rail-btn .tip {
  position: absolute; left: 64px; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  background: #0f1b2d; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
  opacity: 0; transition: opacity .12s; z-index: 40;
}
.rail-btn:hover .tip { opacity: 1; }
.rail-esp { flex: 1; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: sticky; height: auto; flex-direction: row; padding: 8px 12px; gap: 4px; overflow-x: auto; z-index: 30; }
  .rail-logo { width: 38px; height: 38px; margin: 0 8px 0 0; font-size: 18px; }
  .rail-btn { width: 44px; height: 44px; }
  .rail-btn .tip { display: none; }
}

/* Panel derecho: flotante, con margen, esquinas redondeadas. Se cierra con
   Escape, con el fondo, con la ✕ y al navegar. */
.panel-fondo {
  position: fixed; inset: 0; z-index: 60; background: rgba(4,16,42,.38); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s;
}
.panel-fondo.on { opacity: 1; }
.panel {
  position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 61;
  width: min(640px, calc(100vw - 24px)); display: flex; flex-direction: column;
  background: #fff; border-radius: 22px; box-shadow: 0 4px 12px rgba(15,40,70,.08), 0 24px 56px rgba(15,40,70,.16);
  transform: translateX(calc(100% + 20px)); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.panel.on { transform: translateX(0); }
.panel.ancho { width: min(860px, calc(100vw - 24px)); }
body.panel-abierto { overflow: hidden; }

/* Formularios */
.campo {
  width: 100%; border: 1px solid #d6dde8; border-radius: 12px; padding: 9px 12px; font-size: 14px; background: #fff;
  color: #0f1b2d; outline: none; transition: border-color .12s, box-shadow .12s;
}
.campo:focus { border-color: var(--m2); box-shadow: 0 0 0 3px rgba(74,90,114,.20); }
textarea.campo { min-height: 84px; resize: vertical; }
.etq { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #5b6675; margin-bottom: 5px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; transition: transform .08s, box-shadow .12s, background .12s; cursor: pointer; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primario { background: linear-gradient(135deg, var(--m2), var(--m3)); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.btn-primario:hover { box-shadow: 0 8px 22px rgba(0,0,0,.30); }
.btn-suave { background: #fff; color: #0f1b2d; border: 1px solid #d6dde8; }
.btn-suave:hover { background: #f5f7fb; }
.btn-peligro { background: #fdecec; color: #b42323; }
.btn-icono { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #5b6675; }
.btn-icono:hover { background: #f0f3f8; color: #0f1b2d; }
.tarjeta { background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 6px 20px rgba(15,27,45,.06); }
.fila-ficha { cursor: pointer; transition: background .1s; }
.fila-ficha:hover { background: #f7f9fc; }
.tab { padding: 10px 14px; font-size: 13px; font-weight: 700; color: #5b6675; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tab:hover { color: #0f1b2d; }
.tab.on { color: var(--m3); border-image: linear-gradient(90deg, var(--m1), var(--m3)) 1; }
.tnum { font-variant-numeric: tabular-nums; }
.prose-nota p { margin: 0 0 .5em; }
.prose-nota ul { padding-left: 1.2em; list-style: disc; margin: 0 0 .5em; }
.prose-nota a { color: var(--m3); text-decoration: underline; }
.secreto { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; }

/* Tailwind pone display en clases (.grid, .flex) y le gana al atributo hidden. */
[hidden] { display: none !important; }