/* Atún RyM — mismos tokens de diseño que Pesca Fresca (pfresca.romanymartos.com) */
:root{
  --color-brand-50:#eef0f8; --color-brand-200:#b8c0dd; --color-brand-400:#5a6aa3;
  --color-brand-500:#3d447a; --color-brand-600:#2f3578; --color-brand-700:#293073;
  --color-brand-900:#1f2d5c;
  --color-ink:#1a1f35; --color-ink-soft:#5a6378; --color-ink-mute:#8a93a8;
  --color-surface:#fff; --color-surface-alt:#f7f8fb;
  --color-border:#e2e5ee; --color-border-soft:#eef0f5;
  --color-success-bg:#e8f5ec; --color-success-text:#1f6b3a;
  --color-warning-bg:#fff4e0; --color-warning-text:#8a5a00;
  --color-danger-bg:#fceaea;  --color-danger-text:#a41b1b;
  /* Color de identidad de esta aplicación. En Pesca Fresca es el azul de marca;
     aquí es rojo, para saber de un vistazo en cuál de las dos estás. */
  --acc:#b3282d; --acc-suave:#fbeeee;
  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-card:0 1px 2px rgba(41,48,115,.04), 0 1px 1px rgba(41,48,115,.02);
  --sidebar:256px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--color-surface-alt); color:var(--color-ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar); flex:0 0 var(--sidebar); background:var(--color-surface);
  border-right:1px solid var(--color-border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
/* Franja de color de la aplicación, arriba del todo de la barra lateral */
.sidebar{border-top:3px solid var(--acc)}
.brand{padding:22px 24px 18px;border-bottom:1px solid var(--color-border-soft);
  display:flex;flex-direction:column;align-items:center;gap:12px}
.brand img{width:100%;max-width:180px;height:auto;display:block}
/* Distintivo de aplicación: icono + nombre, en el color de la app */
.app-chip{display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px 4px 8px;border-radius:999px;
  background:var(--acc-suave);color:var(--acc);
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.app-chip svg{width:15px;height:15px;fill:currentColor;flex:0 0 15px}
.nav{flex:1;overflow-y:auto;padding:12px 8px}
.nav .sec{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--color-ink-mute);
  padding:20px 16px 8px;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:6px;
  color:var(--color-ink-soft);font-size:14px;font-weight:500;transition:background .15s,color .15s}
.nav a svg{flex:0 0 18px}
.nav a:hover{background:var(--color-brand-50);color:var(--color-brand-700)}
.nav a.on{background:var(--color-brand-700);color:#fff}
.nav .cuenta{margin-left:auto;background:rgba(255,255,255,.22);border-radius:4px;
  padding:1px 7px;font-size:11px;font-weight:600}
.nav a:not(.on) .cuenta{background:var(--color-brand-50);color:var(--color-brand-700)}
.side-foot{padding:16px;border-top:1px solid var(--color-border-soft)}
.side-foot .u{font-size:14px;font-weight:500;color:var(--color-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .r{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-mute)}
.side-foot .btn{margin-top:12px;width:100%;justify-content:center;font-size:12px}
.btn-secondary{background:#fff;color:var(--color-brand-700);border:1px solid var(--color-border)}
.btn-secondary:hover{background:var(--color-brand-50);border-color:var(--color-brand-200)}
.main{flex:1;min-width:0;padding:32px;overflow-x:auto}
.ancho{max-width:1600px;margin:0 auto}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
/* Mismos valores que .page-title y .page-subtitle de Pesca Fresca */
h1{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;color:var(--color-ink);margin:0}
.sub{font-size:.875rem;margin-top:.25rem;color:var(--color-ink-soft);max-width:70ch}

/* ---------- Piezas ---------- */
.card{border:1px solid var(--color-border);box-shadow:var(--shadow-card);background:#fff;
  border-radius:.5rem;overflow:hidden;margin-bottom:1.25rem}
.card-h{padding:1rem 1.25rem;border-bottom:1px solid var(--color-border-soft);
  background:var(--color-surface-alt);
  font-size:.875rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.card-b{padding:1.25rem;font-size:.875rem}
.card-b p{font-size:.875rem}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}
  .sidebar{display:none}.main{padding:16px}}

.kpi{background:#fff;border:1px solid var(--color-border);border-radius:.5rem;padding:1.25rem;
  box-shadow:var(--shadow-card)}
.kpi .l{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-ink-soft)}
.kpi .v{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin-top:.375rem}
.kpi .n{font-size:.75rem;color:var(--color-ink-soft);margin-top:.25rem}

/* .field-label de Pesca Fresca */
label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:.375rem;color:var(--color-ink-soft)}
/* .input de Pesca Fresca */
input,select,textarea{width:100%;padding:.5rem .75rem;border:1px solid var(--color-border);
  border-radius:.375rem;font-size:.875rem;font-family:inherit;background:var(--color-surface);
  color:var(--color-ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-brand-500);
  box-shadow:0 0 0 3px rgba(61,68,122,.12)}
input[readonly]{background:var(--color-surface-alt);color:var(--color-ink-soft)}
.num{text-align:right}
.field{margin-bottom:.875rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:.375rem;font-size:.875rem;font-weight:500;
  cursor:pointer;border:1px solid transparent;font-family:inherit;transition:all .15s ease}
.btn-primary{background:var(--color-brand-700);color:#fff;border-color:var(--color-brand-700)}
.btn-primary:hover{background:var(--color-brand-900)}
.btn-ghost{color:var(--color-ink-soft);background:transparent;border-color:var(--color-border)}
.btn-ghost:hover{border-color:var(--color-brand-400);color:var(--color-brand-700)}
.btn-danger{color:var(--color-danger-text);background:var(--color-danger-bg);border-color:#f0cccc}
.btn-sm{padding:.25rem .625rem;font-size:.75rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Mismas medidas que .tbl de Pesca Fresca */
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem;table-layout:auto}
.tbl th{text-align:left;font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--color-ink-soft);padding:.75rem 1rem;
  border-bottom:1px solid var(--color-border);white-space:nowrap;background:var(--color-surface-alt)}
.tbl td{padding:.75rem 1rem;border-bottom:1px solid var(--color-border-soft);
  color:var(--color-ink);vertical-align:middle}
.tbl tbody tr:hover{background:var(--color-brand-50)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.empty{padding:2.5rem;text-align:center;color:var(--color-ink-mute);font-size:.875rem}

.badge{display:inline-flex;align-items:center;padding:.125rem .5rem;
  font-size:.75rem;font-weight:500;border-radius:.25rem}
.badge-ok{background:var(--color-success-bg);color:var(--color-success-text)}
.badge-warn{background:var(--color-warning-bg);color:var(--color-warning-text)}
.badge-bad{background:var(--color-danger-bg);color:var(--color-danger-text)}
.badge-neutral{background:var(--color-brand-50);color:var(--color-brand-700)}

.flash{padding:.625rem .875rem;border-radius:.375rem;margin-bottom:1rem;font-size:.875rem}
.flash.ok{background:var(--color-success-bg);color:var(--color-success-text)}
.flash.err{background:var(--color-danger-bg);color:var(--color-danger-text)}
.flash.warn{background:var(--color-warning-bg);color:var(--color-warning-text)}

.bar{height:6px;background:var(--color-border-soft);border-radius:3px;overflow:hidden;min-width:70px}
.bar > i{display:block;height:100%;background:var(--color-brand-500)}
a.enlace{color:var(--color-brand-700);font-weight:600}
a.enlace:hover{text-decoration:underline}
.tbl tbody tr:hover{cursor:pointer}
.mute{color:var(--color-ink-mute)}
.soft{color:var(--color-ink-soft)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
hr.sep{border:0;border-top:1px solid var(--color-border-soft);margin:18px 0}
details.exp > summary{cursor:pointer;list-style:none;padding:9px 12px}
details.exp > summary::-webkit-details-marker{display:none}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--color-border);margin-bottom:16px}
.tabs a{padding:.625rem 1rem;font-size:.875rem;font-weight:500;color:var(--color-ink-soft);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--color-brand-700);border-bottom-color:var(--color-brand-700)}