:root {
  --color-primary: #0f6e5c;
  --color-primary-dark: #0b5445;
  --color-primary-light: #e2f3ef;
  --color-dark: #111827;
  --color-text: #374151;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f6f8;
  --color-border: #e5e7eb;
  --color-success: #157347;
  --color-error: #c8102e;
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 10px;
  --container-width: 1080px;
}

* { box-sizing: border-box; }

/* El atributo hidden (usado por JS para esconder secciones como los datos
   de embarcación en el formulario de activo) pierde por defecto contra
   cualquier regla propia que ponga display en el mismo elemento (p. ej.
   .form-grid con display:grid) — las reglas del sitio siempre ganan a las
   del navegador aunque la especificidad sea igual. Con esta regla explícita,
   hidden vuelve a ocultar de verdad pase lo que pase. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg-alt);
  line-height: 1.55;
}

h1, h2, h3 { color: var(--color-dark); margin: 0 0 0.5em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }

/* Para páginas con tablas de muchas columnas (p. ej. Personal, con nombre,
   email, puesto, departamento, especialidad, teléfono, usuario y estado):
   el ancho normal del container las deja cortadas con scroll horizontal.
   Se activa pasando anchoCompleto:true al incluir partials/header. */
.container-ancho { max-width: 1400px; }

.btn {
  display: inline-block;
  padding: 0.6em 1.2em;
  border-radius: var(--radius);
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover, .btn:focus { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--color-dark); border-color: var(--color-border); }
.btn-secondary:hover, .btn-secondary:focus { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { padding: 0.4em 0.9em; font-size: 0.85rem; }

.app-header { background: var(--color-dark); color: #fff; }
.app-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; flex-wrap: wrap; gap: 8px; }
.app-header .logo { color: #fff; font-weight: 700; }
.app-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-nav a, .app-nav span { color: #cbd2dc; font-weight: 500; font-size: 0.92rem; }
.app-nav a:hover, .app-nav a:focus { color: #fff; }
.app-main { padding: 32px 0 64px; }

/* Botón cuadrado del menú móvil, oculto en escritorio */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 1px; }

.nav-dropdown { position: relative; }
.nav-dropdown > summary { list-style: none; cursor: pointer; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after { content: " ▾"; font-size: 0.75em; }
.nav-dropdown[open] > summary { color: #fff; }
.nav-dropdown-menu { position: absolute; top: calc(100% + 10px); left: 0; background: #1f2531; border: 1px solid #3a4250; border-radius: var(--radius); padding: 6px; display: flex; flex-direction: column; min-width: 160px; z-index: 10; }
.nav-dropdown-menu a { padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus { background: #2a3140; text-decoration: none; }

.selector-empresa { display: flex; align-items: center; gap: 6px; color: #cbd2dc; font-size: 0.92rem; }
.selector-empresa select { padding: 0.2em 0.5em; border-radius: 6px; border: 1px solid #3a4250; background: #1f2531; color: #fff; font: inherit; }

.link-button { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
.link-button.danger { color: var(--color-error); }
.logout-form { display: inline; }

.auth-panel { max-width: 440px; margin: 60px auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 32px; }
.auth-form .form-group { margin-bottom: 16px; }
.auth-secondary { margin-top: 16px; font-size: 0.9rem; color: var(--color-muted); }

.page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }

.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 24px; }
.data-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.data-table th, .data-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.data-table th { background: var(--color-bg-alt); font-weight: 600; color: var(--color-dark); }
.table-actions { display: flex; gap: 10px; white-space: nowrap; }

.badge { display: inline-block; padding: 0.2em 0.7em; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge-vehiculo { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-embarcacion { background: #e4ecf7; color: #1d4ed8; }
.badge-otro_activo { background: #fdf1d6; color: #92600a; }
.badge-aprobada { background: var(--color-primary-light); color: var(--color-success); }
.badge-pendiente { background: #fdf1d6; color: #92600a; }
.badge-rechazada { background: #fbe1e4; color: var(--color-error); }

.badge-operativo { background: var(--color-primary-light); color: var(--color-success); }
.badge-mantenimiento { background: #fdf1d6; color: #92600a; }
.badge-fuera_servicio { background: #fbe1e4; color: var(--color-error); }
.badge-baja { background: #e5e7eb; color: var(--color-muted); }

.admin-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-group-wide { grid-column: 1 / -1; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 5px; color: var(--color-dark); font-size: 0.9rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.55em 0.75em; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.field-hint { display: block; font-size: 0.82rem; color: var(--color-muted); margin-top: 4px; }

.form-status { margin-top: 12px; font-weight: 600; }
.form-status.error { color: var(--color-error); }
.form-status.success { color: var(--color-success); }

.ficha-vehiculo { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; }
.ficha-vehiculo dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.ficha-vehiculo dt { font-size: 0.78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.ficha-vehiculo dd { margin: 2px 0 0; font-weight: 600; color: var(--color-dark); }

.empty-state { padding: 24px; text-align: center; color: var(--color-muted); }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 20px 0; }
.dashboard-card { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; text-align: center; }
.dashboard-card h3 { font-size: 1.9rem; color: var(--color-primary); margin-bottom: 0.2em; }
.dashboard-card p { color: var(--color-muted); margin: 0; font-size: 0.88rem; }

.aviso-pendientes { border-color: #92600a; background: #fdf8ee; }

.manuales-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0; }
.manual-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.manual-card video { width: 100%; border-radius: calc(var(--radius) - 4px); background: #000; margin-bottom: 12px; }
.manual-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.manual-card p { margin: 0 0 6px; color: var(--color-dark); font-size: 0.92rem; }

.proximamente { background: #f5f6f8; border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; }
.proximamente h3 { margin: 0 0 8px; font-size: 1rem; }
.proximamente ul { margin: 0; padding-left: 20px; color: var(--color-muted); font-size: 0.9rem; }

.hero { padding: 56px 0; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero-text h1 { font-size: 2.2rem; line-height: 1.15; margin-bottom: 0.4em; }
.hero-subtitle { color: var(--color-muted); font-size: 1.05rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
}

.features { padding: 8px 0 64px; }
.features h2 { text-align: center; margin-bottom: 28px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.feature-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 0.4em; color: var(--color-primary-dark); }
.feature-card p { margin: 0; color: var(--color-muted); font-size: 0.92rem; }

.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-image { order: -1; }
  .grid-2col { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app-header-inner { padding: 10px 0; }
  .nav-toggle { display: flex; }

  .app-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 50;
  }
  .app-nav.is-open { display: flex; }
  .app-nav > a, .app-nav > span, .app-nav > .logout-form, .app-nav > .selector-empresa {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .app-nav .link-button { display: block; width: 100%; text-align: left; }
  .app-nav .nav-dropdown { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .app-nav .nav-dropdown > summary { padding: 14px 20px; }
  .app-nav .nav-dropdown-menu { position: static; border: none; background: #171c26; border-radius: 0; }
}