/*
 * sigaa.css — Estilos de componentes y layout
 * Los valores de marca (colores, fuentes) vienen de sigaa-theme.css
 */

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--sigaa-font-family);
  font-size: var(--sigaa-font-size-base);
  background-color: var(--sigaa-bg);
  color: var(--sigaa-text);
}

/* ── Bootstrap button overrides (match brand palette) ──────────────────── */
.btn-primary {
  --bs-btn-bg: var(--sigaa-secondary);
  --bs-btn-border-color: var(--sigaa-secondary);
  --bs-btn-hover-bg: var(--sigaa-primary);
  --bs-btn-hover-border-color: var(--sigaa-primary);
  --bs-btn-active-bg: #163340;
  --bs-btn-active-border-color: #163340;
  --bs-btn-disabled-bg: var(--sigaa-secondary);
  --bs-btn-disabled-border-color: var(--sigaa-secondary);
}
.btn-outline-primary {
  --bs-btn-color: var(--sigaa-secondary);
  --bs-btn-border-color: var(--sigaa-secondary);
  --bs-btn-hover-bg: var(--sigaa-secondary);
  --bs-btn-hover-border-color: var(--sigaa-secondary);
  --bs-btn-active-bg: var(--sigaa-primary);
  --bs-btn-active-border-color: var(--sigaa-primary);
}
a { color: var(--sigaa-secondary); }
a:hover { color: var(--sigaa-primary); }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.sigaa-navbar {
  background-color: var(--sigaa-navbar-bg);
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
  padding: .4rem 1rem;
}
.sigaa-navbar .nav-link { color: var(--sigaa-navbar-text) !important; }
.sigaa-navbar .nav-link:hover,
.sigaa-navbar .nav-link.active { color: var(--sigaa-navbar-active) !important; }
.sigaa-navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
.sigaa-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.sigaa-brand img { height: 32px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sigaa-footer {
  background-color: var(--sigaa-footer-bg);
  color: var(--sigaa-footer-text);
  font-size: var(--sigaa-font-size-sm);
  padding: .75rem 0;
  margin-top: 2rem;
}

/* ── Login ──────────────────────────────────────────────────────────────── */
.sigaa-login-bg {
  background: linear-gradient(135deg, var(--sigaa-primary) 0%, var(--sigaa-secondary) 100%);
  min-height: 100vh;
}
.sigaa-login-brand {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.sigaa-login-brand span { color: var(--sigaa-accent); }

/* ── Encabezado de página ───────────────────────────────────────────────── */
.sigaa-page-header {
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--sigaa-primary);
}
.sigaa-page-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--sigaa-primary);
  margin: 0;
}
.sigaa-page-subtitle { color: var(--sigaa-text-muted); font-size: .875rem; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.sigaa-card {
  background: var(--sigaa-surface);
  border: none;
  border-radius: var(--sigaa-border-radius);
  box-shadow: var(--sigaa-shadow-sm);
  margin-bottom: 1rem;
}
.sigaa-card .card-header {
  background: var(--sigaa-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--sigaa-border-radius) var(--sigaa-border-radius) 0 0;
  padding: .6rem 1rem;
}
.sigaa-module-card {
  border: none;
  box-shadow: var(--sigaa-shadow);
  transition: box-shadow .2s, transform .15s;
  border-radius: var(--sigaa-border-radius);
}
.sigaa-module-card:hover { box-shadow: var(--sigaa-shadow-lg); transform: translateY(-2px); }
.sigaa-module-card .card-title { color: var(--sigaa-primary); font-weight: 600; }

/* ── Sección de etapa (incidencias) ─────────────────────────────────────── */
.sigaa-etapa-header {
  background: var(--sigaa-primary);
  color: #fff;
  padding: .5rem 1rem;
  font-weight: 600;
  border-radius: var(--sigaa-border-radius) var(--sigaa-border-radius) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Filtros ────────────────────────────────────────────────────────────── */
.sigaa-filtros {
  background: var(--sigaa-surface);
  border-radius: var(--sigaa-border-radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sigaa-shadow-sm);
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.sigaa-table { font-size: var(--sigaa-font-size-base); }
.sigaa-table thead th {
  background: var(--sigaa-primary);
  color: #fff;
  border-color: var(--sigaa-primary);
  white-space: nowrap;
  font-weight: 500;
}
.sigaa-table tbody tr:hover { background: rgba(45,95,110,.04); }
.sigaa-table th.sortable { user-select: none; }
.sigaa-table th.sortable:hover { text-decoration: underline; }
.sigaa-table th .sort-icon { font-size: .7rem; opacity: .8; }

/* ── Badges de estado ───────────────────────────────────────────────────── */
.badge-viaje-borrador   { background: #6c757d; color: #fff; }
.badge-viaje-pendiente  { background: #ffc107; color: #212529; }
.badge-viaje-aprobado   { background: #198754; color: #fff; }
.badge-viaje-rechazado  { background: #dc3545; color: #fff; }
.badge-viaje-con_gae    { background: #0d6efd; color: #fff; }
.badge-viaje-liquidado  { background: #0dcaf0; color: #212529; }
.badge-viaje-reapertura { background: #fd7e14; color: #fff; }
.badge-viaje-reabierto  { background: #6610f2; color: #fff; }
.badge-viaje-cerrado    { background: #343a40; color: #fff; }

.badge-asist-abierta       { background: #dc3545; color: #fff; }
.badge-asist-en_proceso    { background: #fd7e14; color: #fff; }
.badge-asist-rechazada     { background: #b02a37; color: #fff; }
.badge-asist-solucionada   { background: #198754; color: #fff; }
.badge-asist-cerrada       { background: #6c757d; color: #fff; }
.badge-asist-fuera_alcance { background: #6f42c1; color: #fff; }

.badge-criticidad-permite_operar    { background: #198754; color: #fff; }
.badge-criticidad-no_permite_operar { background: #dc3545; color: #fff; }

/* Fallback genérico para severidades sin badge específico */
[class*="badge-severidad-"]  { background: #6c757d; color: #fff; }
.badge-severidad-emergencia  { background: #dc3545; color: #fff; }
.badge-severidad-critica     { background: #fd7e14; color: #fff; }
.badge-severidad-moderada    { background: #ffc107; color: #212529; }
.badge-severidad-leve        { background: #0dcaf0; color: #212529; }
.badge-severidad-no_critica  { background: #198754; color: #fff; }

/* ── Indicador SLA ──────────────────────────────────────────────────────── */
.sla-bar { height: 6px; border-radius: 3px; background: #e9ecef; overflow: hidden; }
.sla-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; max-width: 100%; }
.sla-badge-pausado { font-size: .65rem; }

.badge-activ-pendiente   { background: #0d6efd; color: #fff; }
.badge-activ-en_progreso { background: #fd7e14; color: #fff; }
.badge-activ-en_pausa    { background: #6c757d; color: #fff; }
.badge-activ-completada  { background: #198754; color: #fff; }
.badge-activ-cancelada   { background: #b02a37; color: #fff; }

.badge-prioridad-alta  { background: #dc3545; color: #fff; }
.badge-prioridad-media { background: #ffc107; color: #212529; }
.badge-prioridad-baja  { background: #0dcaf0; color: #212529; }

/* ── Panel de acciones ──────────────────────────────────────────────────── */
.sigaa-panel-acciones {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: var(--sigaa-border-radius);
  padding: 1rem;
}

/* ── Scroll con fade arriba/abajo ──────────────────────────────────────── */
.scroll-fade-top,
.scroll-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
}
.scroll-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #f8f9fa 0%, rgba(248,249,250,.6) 40%, transparent 100%);
}
.scroll-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #f8f9fa 0%, rgba(248,249,250,.6) 40%, transparent 100%);
}
.scroll-fade-top.visible { opacity: 1; }
.scroll-fade-bottom.visible { opacity: 1; }

/* ── Planilla imprimible ────────────────────────────────────────────────── */
@media print {
  .sigaa-navbar, .sigaa-footer, .sigaa-filtros, .no-print,
  .btn, nav, .sigaa-page-header .sigaa-page-actions { display: none !important; }
  body { background: #fff; font-size: 10px; }
  .sigaa-table thead th { background: #333 !important; -webkit-print-color-adjust: exact; }
  .table { font-size: 9px; }
}
.planilla-container { overflow-x: auto; }

/* ── Badges contabilización ─────────────────────────────────────────────── */
.badge-cont-contabilizado { background: #198754; color: #fff; }
.badge-cont-parcial       { background: #fd7e14; color: #fff; }

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.text-primary-sigaa { color: var(--sigaa-primary) !important; }
.bg-primary-sigaa   { background-color: var(--sigaa-primary) !important; }

/* ── Mobile responsiveness ───────────────────────────────────────────────── */

/* Clickable rows - hover only on non-touch devices */
@media (hover: hover) {
  .clickable-row:hover { background-color: var(--bs-light, #f8f9fa); }
}

/* Touch-friendly pagination */
@media (max-width: 767.98px) {
  .pagination .page-link {
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
  }

  /* Historial textarea: fewer rows on mobile */
  textarea[readonly].font-monospace { rows: 5; }

  /* Tables: smaller font on mobile */
  .table { font-size: 0.85rem; }
  .table th, .table td { padding: .4rem .5rem; }

  /* Description truncation: fit viewport */
  .text-truncate[style*="max-width"] { max-width: 60vw !important; }

  /* Filter forms: full width on mobile */
  .sigaa-page-header { flex-direction: column; align-items: stretch !important; }
  .sigaa-page-header > * { width: 100%; }
  .sigaa-page-header .btn-group,
  .sigaa-page-header .d-flex { flex-wrap: wrap; gap: .5rem; }

  /* Action buttons: larger hit targets */
  .btn-sm {
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: .375rem .75rem;
  }

  /* Budget cards: stack on small phones */
  .card-body h3 { font-size: 1.5rem; }

  /* Navbar adjustments */
  .navbar-nav .dropdown-menu { position: static; width: 100%; }

  /* Definition lists: full width on mobile */
  dl.row > dt, dl.row > dd {
    padding-bottom: .25rem;
  }

  /* Stats cards on home: 2 per row minimum */
  .row > [class*="col-lg-3"] { flex: 0 0 50%; max-width: 50%; }
}

/* Extra small screens (< 400px) */
@media (max-width: 399.98px) {
  .container-fluid { padding-left: .5rem; padding-right: .5rem; }

  /* Budget fields: full width */
  .row > .col-6 { flex: 0 0 100%; max-width: 100%; }

  /* Page header: stack everything */
  .sigaa-page-header h2 { font-size: 1.25rem; }

  /* Stats cards: full width */
  .row > [class*="col-lg-3"] { flex: 0 0 100%; max-width: 100%; }
}