:root {
  --acento: #14b8a6;
  --fondo: #0b1117;
  --superficie: #131c25;
  --superficie-2: #1b2632;
  --borde: #263241;
  --texto: #e8eef4;
  --texto-suave: #9aabbd;
  --rojo: #ef4444;
  --radio: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

button { font: inherit; }

.cabecera, main, .pie {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 20px;
}
.marca { display: flex; align-items: center; gap: 14px; }
.logo { height: 48px; width: auto; }
h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
.subtitulo { margin: 4px 0 0; color: var(--texto-suave); }
.reloj {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 0.9rem;
  white-space: nowrap;
}
.reloj strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ---------- Cámara destacada ---------- */
.destacada {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.marco video, .marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}
.marco:fullscreen video { object-fit: contain; }

.insignia {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  animation: latido 1.6s ease-in-out infinite;
}
.insignia.apagada .punto { background: var(--texto-suave); animation: none; }
@keyframes latido { 50% { opacity: 0.35; } }

.aviso {
  position: absolute;
  inset: auto 0 50% 0;
  transform: translateY(50%);
  margin: 0;
  padding: 0 16px;
  text-align: center;
  color: var(--texto-suave);
  pointer-events: none;
}

.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
  padding: 16px 20px 20px;
}
.info h2 { margin: 0; font-size: 1.35rem; }
.ubicacion { margin: 2px 0 0; color: var(--acento); font-weight: 600; font-size: 0.95rem; }
.descripcion { margin: 8px 0 0; color: var(--texto-suave); max-width: 70ch; }
.descripcion:empty { display: none; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones button, .filtros button {
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
}
.acciones button:hover, .filtros button:hover { border-color: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.filtros button[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #04110f;
  font-weight: 600;
}

/* ---------- Cuadrícula ---------- */
.cuadricula {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}
.tarjeta {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.tarjeta:hover { border-color: var(--acento); transform: translateY(-2px); }
.tarjeta[aria-current="true"] { border-color: var(--acento); }
.tarjeta .vista {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aabbd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='.45'%3E%3Cpath d='M15 10l4.55-2.28A1 1 0 0 1 21 8.62v6.76a1 1 0 0 1-1.45.9L15 14'/%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E") center / 40px no-repeat,
    linear-gradient(135deg, #12303a, #0d1a24);
}
.tarjeta video, .tarjeta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tarjeta .etiqueta {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 0.75rem;
  font-weight: 600;
}
.tarjeta .etiqueta:empty { display: none; }
.tarjeta .texto { display: block; padding: 10px 14px 14px; }
.tarjeta .nombre { display: block; font-weight: 600; }
.tarjeta .lugar { display: block; color: var(--texto-suave); font-size: 0.9rem; }

.pie {
  padding-top: 32px;
  padding-bottom: 32px;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

/* ---------- Cuenta ---------- */
.lado { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; }
.cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.9rem; }
.cuenta[hidden] { display: none; }
.quien { color: var(--texto); font-weight: 600; }
.enlace-boton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--acento);
  font-size: inherit;
  text-decoration: none;
  cursor: pointer;
}
.enlace-boton:hover { text-decoration: underline; }
.enlace-boton[hidden] { display: none; }

/* ---------- Formularios (login, contraseña, administración) ---------- */
.formulario { display: grid; gap: 14px; }
.formulario h2 { margin: 0; font-size: 1.25rem; }
.formulario label { display: grid; gap: 6px; color: var(--texto-suave); font-size: 0.9rem; }
.formulario input[type="text"], .formulario input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
}
.formulario input:focus { border-color: var(--acento); outline: none; }
.formulario .acciones { justify-content: flex-end; }
.error { margin: 0; min-height: 1.2em; color: #fca5a5; font-size: 0.9rem; }
.error:empty { min-height: 0; }
button.primario, .acciones button.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #04110f;
  font-weight: 600;
}
.dialogo {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.6); }

/* ---------- Página de login ---------- */
.pantalla-acceso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 16px;
}
.tarjeta-acceso {
  width: min(400px, 100%);
  padding: 28px 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.tarjeta-acceso .logo { display: block; margin: 0 auto 12px; }
.tarjeta-acceso .logo[hidden] { display: none; }
.tarjeta-acceso h1 { margin-bottom: 4px; text-align: center; }
.tarjeta-acceso .subtitulo { margin-bottom: 20px; text-align: center; }
.tarjeta-acceso button.primario { width: 100%; padding: 11px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .punto { animation: none; }
  .tarjeta { transition: none; }
  .tarjeta:hover { transform: none; }
}

/* ---------- Administración ---------- */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.barra button, .tabla button, .formulario .acciones button {
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
}
.barra button:hover, .tabla button:hover, .formulario .acciones button:hover { border-color: var(--acento); }
.resumen { margin: 0; color: var(--texto-suave); font-size: 0.9rem; }
.tabla-envoltura {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.tabla { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.95rem; }
.tabla th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td strong { display: block; font-weight: 600; }
.tabla tr.inactivo td { opacity: 0.55; }
.secundario { color: var(--texto-suave); font-size: 0.85rem; }
.derecha { text-align: right; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.chip-activo { background: rgba(20, 184, 166, 0.15); color: var(--acento); }
.chip-inactivo { background: rgba(148, 163, 184, 0.15); color: var(--texto-suave); }

.dialogo-ancho { width: min(520px, calc(100vw - 32px)); }
.con-boton { display: flex; gap: 8px; }
.con-boton input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; }
.con-boton button {
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
}
.opciones { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; }
.opciones legend { padding: 0 6px; color: var(--texto-suave); font-size: 0.85rem; }
.opciones:disabled { opacity: 0.45; }
.formulario .opcion { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 0.95rem; }
.opcion[hidden] { display: none; }
.opcion input { width: 18px; height: 18px; accent-color: var(--acento); }
.lista-barcos { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; }
.formulario .acciones button.peligro { margin-right: auto; border-color: #7f1d1d; color: #fca5a5; }
.formulario .acciones button.peligro[hidden] { display: none; }
.formulario .acciones button.primario { background: var(--acento); border-color: var(--acento); color: #04110f; }