/* =========================================================
   buques.css  —  Cyber-Corredera (fichas de buques)
   Estilo tipo Wikipedia, responsivo, accesible y con modo oscuro
   ========================================================= */

/* ---------- Variables de tema ---------- */
:root{
  --text:#202122;
  --muted:#54595d;
  --bg:#ffffff;
  --link:#0645ad;
  --link-visited:#0b0080;
  --border:#a2a9b1;
  --table:#f8f9fa;
  --infobox:#f8f9fa;
  --note:#fffbe6;
  --accent:#36a3ff;
  --radius:8px;
  --radius-sm:4px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
}

@media (prefers-color-scheme: dark){
  :root{
    --text:#e6e6e6;
    --muted:#b7b7b7;
    --bg:#111214;
    --link:#7ab4ff;
    --link-visited:#b49cff;
    --border:#2a2e33;
    --table:#15181b;
    --infobox:#15181b;
    --note:#2a281c;
    --accent:#54b7ff;
    --shadow:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.38);
  }
}

/* ---------- Reset mínimo ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Layout principal ---------- */
.content{
  max-width:1100px;
  margin:0 auto;
  padding:1.5rem;
}
@media (min-width:1200px){ .content{ padding:2rem } }

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{ margin:0 0 .6rem 0; font-weight:700; line-height:1.25 }
h1{ font-size:1.95rem; margin-top:.2rem; margin-bottom:1rem }
h2{ font-size:1.4rem; padding-bottom:.25rem; border-bottom:1px solid var(--border); margin-top:1.4rem }
h3{ font-size:1.15rem; margin-top:1rem }
p{ margin:.65rem 0 }
.lead{ color:var(--muted); font-size:1rem }
.small{ font-size:.95rem; color:var(--muted) }

/* ---------- Enlaces ---------- */
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }
a:visited{ color:var(--link-visited) }

/* ---------- Imágenes / Figuras ---------- */
img{ max-width:100%; height:auto; border-radius:var(--radius-sm) }
figure{ margin:1rem 0; }
figcaption{ font-size:.9rem; color:var(--muted); text-align:center }

/* ---------- Infobox ---------- */
.infobox{
  float:right; clear:right;
  margin:0 0 1rem 1rem;
  width:320px;
  background:var(--infobox);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.infobox .title{
  background:linear-gradient(0deg, rgba(0,0,0,0.02), rgba(255,255,255,0.02));
  padding:.55rem .7rem;
  font-weight:700;
  border-bottom:1px solid var(--border);
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}
.infobox table{ width:100%; border-collapse:collapse }
.infobox td{
  padding:.45rem .65rem;
  border-top:1px solid var(--border);
  vertical-align:top;
}
@media (max-width:900px){
  .infobox{ float:none; width:100%; margin:0 0 1rem 0 }
}

/* ---------- Tablas “wikitable” ---------- */
.wikitable{
  width:100%;
  border:1px solid var(--border);
  border-collapse:collapse;
  background:var(--table);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.wikitable caption{
  caption-side:top; text-align:left;
  padding:.6rem .65rem; font-weight:600; color:var(--muted)
}
.wikitable th,.wikitable td{
  border:1px solid var(--border);
  padding:.55rem .65rem;
  vertical-align:top;
}
.wikitable th{
  background:rgba(0,0,0,.03);
  text-align:left;
  font-weight:700;
}
.wikitable tr:nth-child(even) td{ background:rgba(0,0,0,.02) }
@media (prefers-color-scheme: dark){
  .wikitable tr:nth-child(even) td{ background:rgba(255,255,255,.03) }
}

/* ---------- Bloques de nota / alert ---------- */
.note{
  background:var(--note);
  border:1px solid rgba(240,230,166,.9);
  padding:.65rem .8rem;
  border-radius:var(--radius-sm);
  margin:.75rem 0;
}

/* ---------- Listas de referencias ---------- */
.refs{ font-size:.95rem; padding-left:1.1rem }
.refs li{ margin:.4rem 0 }

/* ---------- Código / pre ---------- */
code,kbd,samp{ font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace; font-size:.95em }
pre{
  background:var(--table);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.75rem;
  overflow:auto;
}

/* ---------- Utilidades ---------- */
.hr{ height:1px; background:var(--border); margin:1rem 0; border:0 }
.center{ text-align:center }
.right{ text-align:right }
.m-0{ margin:0 }
.mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.5rem }
.mb-1{ margin-bottom:.5rem } .mb-2{ margin-bottom:1rem } .mb-3{ margin-bottom:1.5rem }
.p-1{ padding:.5rem } .p-2{ padding:1rem } .p-3{ padding:1.5rem }

/* ---------- Grid de tarjetas (para BU.php índice) ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem;
}
.card{
  grid-column:span 4;
  background:var(--table);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .08s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.12) }
.card a{ display:block; color:inherit; text-decoration:none }
.card-header{ padding:.7rem .9rem; font-weight:700; border-bottom:1px solid var(--border) }
.card-body{ padding:.8rem .9rem; color:var(--muted) }
.card-media img{ display:block; width:100%; height:auto }
@media (max-width:1100px){ .card{ grid-column:span 6 } }
@media (max-width:700px){ .card{ grid-column:span 12 } }

/* ---------- Navegación local (opcional) ---------- */
.local-nav{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:.5rem 0 1rem 0;
}
.local-nav a{
  padding:.35rem .6rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--table);
}
.local-nav a:hover{ background:rgba(0,0,0,.04) }

/* ---------- Tablas compactas (si las necesitas) ---------- */
.table-compact th,.table-compact td{ padding:.35rem .5rem; font-size:.96rem }

/* ---------- Accesibilidad ---------- */
:focus{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ---------- Vista de impresión ---------- */
@media print{
  body{ background:#fff; color:#000 }
  a{ color:#000; text-decoration:underline }
  .infobox{ float:none; width:100%; box-shadow:none }
  .card{ box-shadow:none }
  .local-nav{ display:none }
  .content{ max-width:none; padding:0 }
}