/* =========================================================
   Control de Pescas - tema claro y sobrio
   ========================================================= */
:root {
  --pe-bg: #f5f7fa;
  --pe-surface: #ffffff;
  --pe-border: #e4e9f0;
  --pe-text: #1f2a37;
  --pe-muted: #6b7684;
  --pe-primary: #1d4f7a;
  --pe-primary-soft: #e8f0f8;
  --pe-accent: #0e8a8c;
  --pe-accent-soft: #e3f4f4;
  --pe-warn-soft: #fff6e5;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--pe-bg);
  --bs-body-color: var(--pe-text);
  --bs-primary: #1d4f7a;
  --bs-primary-rgb: 29, 79, 122;
  --bs-link-color: #1d4f7a;
  --bs-link-color-rgb: 29, 79, 122;
  --bs-border-color: var(--pe-border);
}
html, body { background: var(--pe-bg); color: var(--pe-text); font-size: 14px; }

.btn-primary { --bs-btn-bg: var(--pe-primary); --bs-btn-border-color: var(--pe-primary); --bs-btn-hover-bg: #173f62; --bs-btn-hover-border-color: #173f62; --bs-btn-active-bg: #12324e; }
.btn-outline-primary { --bs-btn-color: var(--pe-primary); --bs-btn-border-color: #b9cde0; --bs-btn-hover-bg: var(--pe-primary); --bs-btn-hover-border-color: var(--pe-primary); }
.btn-accent { background: var(--pe-accent); color: #fff; border-color: var(--pe-accent); }
.btn-accent:hover { background: #0b7375; color: #fff; }

/* Estructura */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 248px; background: var(--pe-surface); border-right: 1px solid var(--pe-border); position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 1030; transition: transform .2s ease; }
.main { flex: 1; margin-left: 248px; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--pe-border); display: flex; align-items: center; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020; }
.page-title { font-size: 1.15rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.content { padding: 1.5rem; flex: 1; }
.footer { padding: .75rem 1.5rem; color: var(--pe-muted); font-size: .8rem; border-top: 1px solid var(--pe-border); background: var(--pe-surface); }
.user-btn { border: 1px solid var(--pe-border); background: #fff; }

.brand { display: flex; gap: .75rem; align-items: center; padding: 1.1rem 1.1rem 1rem; border-bottom: 1px solid var(--pe-border); }
.brand-logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--pe-primary), var(--pe-accent)); color: #fff; display: grid; place-items: center; font-size: 1.25rem; }
.brand-title { font-weight: 700; font-size: .95rem; line-height: 1.1; }
.brand-sub { color: var(--pe-muted); font-size: .72rem; letter-spacing: .12em; }
.sidebar .nav { padding: .75rem .6rem 2rem; }
.sidebar .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #95a0ad; padding: 1rem .75rem .35rem; font-weight: 600; }
.sidebar .nav-link { display: flex; gap: .65rem; align-items: center; color: #3b4754; padding: .48rem .75rem; border-radius: 8px; font-weight: 500; font-size: .88rem; }
.sidebar .nav-link i { font-size: 1rem; color: #7d8996; }
.sidebar .nav-link:hover { background: #f1f4f8; color: var(--pe-primary); }
.sidebar .nav-link.active { background: var(--pe-primary-soft); color: var(--pe-primary); }
.sidebar .nav-link.active i { color: var(--pe-primary); }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.08); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .content { padding: 1rem; }
  .topbar { padding: 0 1rem; }
}

/* Tarjetas */
.card { border: 1px solid var(--pe-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: transparent; border-bottom: 1px solid var(--pe-border); font-weight: 600; padding: .85rem 1.1rem; }
.card-body { padding: 1.1rem; }
.section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pe-muted); font-weight: 600; margin: 0 0 .75rem; }

.kpi { padding: 1rem 1.1rem; }
.kpi .kpi-label { color: var(--pe-muted); font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-top: .2rem; }
.kpi .kpi-sub { color: var(--pe-muted); font-size: .78rem; }
.kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; }
.kpi-icon.blue { background: var(--pe-primary-soft); color: var(--pe-primary); }
.kpi-icon.teal { background: var(--pe-accent-soft); color: var(--pe-accent); }
.kpi-icon.amber { background: var(--pe-warn-soft); color: #b7791f; }
.kpi-icon.rose { background: #fdeeee; color: #c0392b; }

/* Formularios */
.form-label { font-weight: 500; font-size: .83rem; color: #3b4754; margin-bottom: .3rem; }
.form-control, .form-select { border-color: #d6dde6; }
.form-control:focus, .form-select:focus { border-color: #8fb1d1; box-shadow: 0 0 0 .2rem rgba(29,79,122,.12); }
.req::after { content: " *"; color: #c0392b; }
.form-text { font-size: .76rem; }
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; }
.ts-control { border-color: #d6dde6 !important; min-height: 36px; }
.ts-dropdown { font-size: .88rem; }

/* Tablas */
.table { --bs-table-bg: transparent; font-size: .85rem; }
.table thead th { background: #f4f6f9; color: #4a5562; font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--pe-border); white-space: nowrap; }
.table-hover tbody tr:hover { background: #f7fafd; }
.table tfoot td, .table tfoot th { background: #eef3f8; font-weight: 700; }
.table-sm td, .table-sm th { padding: .35rem .5rem; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-reporte { font-size: .76rem; }
.table-reporte td { vertical-align: top; }
.table-wrap { overflow-x: auto; }
div.dt-container .dt-search input { border-color: #d6dde6; }
div.dt-container div.dt-length select { border-color: #d6dde6; }

.badge { font-weight: 600; }
.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #eef2f6; font-size: .74rem; margin: 0 .15rem .15rem 0; }
.text-muted-2 { color: var(--pe-muted) !important; }

.row-detalle { background: #fbfcfe; border: 1px dashed #d6dde6; border-radius: 10px; padding: .75rem; margin-bottom: .6rem; }
.filtros { background: var(--pe-surface); border: 1px solid var(--pe-border); border-radius: 12px; padding: 1rem 1.1rem .4rem; margin-bottom: 1rem; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(1200px 600px at 10% -10%, #e3eef8 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #e0f2f1 0%, transparent 60%), var(--pe-bg); }
.login-card { width: 100%; max-width: 400px; }

/* Matriz de asistencia */
.matriz td, .matriz th { text-align: center; padding: .25rem .3rem !important; font-size: .72rem; }
.matriz td.nombre, .matriz th.nombre { text-align: left; white-space: nowrap; position: sticky; left: 0; background: #fff; }
.matriz .p { background: #e6f4ea; color: #1e7b34; font-weight: 600; }
.matriz .a { background: #e8f0f8; color: var(--pe-primary); font-weight: 600; }
.matriz .finde { background: #fafafa; }

@media print {
  .sidebar, .topbar, .footer, .no-print, .filtros { display: none !important; }
  .main { margin: 0; }
  .content { padding: 0; }
}