/* ==========================================================================
   Panel de administración · tokens base
   Variables de diseño (colores, radios, fuentes, sombras) y el puente que hace
   que Bootstrap 5.3 las use, más el reestilizado de sus componentes. Se carga
   en index.html justo después de bootstrap.min.css; la marca Aldecort
   (css/aldecort-tema.css) redefine después los tokens de color de marca.
   ========================================================================== */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
/* Formato HSL "H S% L%": se consumen con hsl(var(--x)). */
:root {
  --background: 0 0% 100%;               /* #FFFFFF  Blanco */
  --foreground: 222.2 47.4% 11.2%;       /* #0F172A  Tinta navy: texto y datos */
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --primary: 358 73% 48%;                /* #D32027  Rojo de marca base (aldecort-tema.css lo redefine) */
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96.1%;            /* #F1F5F9  Gris piedra */
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%; /* #64748B  Tinta gris: solo metadata */
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;          /* #EF4444  Rojo error (≠ rojo marca) */
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;           /* #E2E8F0  Borde piedra, 1px siempre */
  --input: 214.3 31.8% 91.4%;
  --ring: 358 73% 48%;                   /* anillo de foco = rojo marca */
  --radius: 0.5rem;                      /* lg 8px · md 6px · sm 4px */

  /* Estados: SOLO para banners/confirmaciones, nunca botones ni badges. */
  --success: #15803D;
  --success-surface: #EDF7F0;
  --warning: #78350F;
  --warning-surface: #FFFBEB;
  --warning-border: #FDE68A;

  /* Calendarización de obras (css/obras.css): el estado de alerta de cada obra, siempre con su icono y su texto. Son
     rellenos con texto blanco (WCAG AA, 4,5:1 o más): vencida 6,5:1 · aviso 5,2:1 · completa 5,0:1 · sin hitos 4,8:1 ·
     en curso, el azul de marca #0085BD (4,1:1) solo para lo que no es texto (bordes, rombos, iconos) y #0079AD (4,8:1)
     de relleno bajo texto blanco. */
  --obra-vencida: #B91C1C;
  --obra-aviso: #C2410C;
  --obra-curso: #0085BD;
  --obra-curso-relleno: #0079AD;
  --obra-completa: #15803D;
  --obra-sinhitos: #64748B;

  /* Atajos listos para usar. */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --font-sans: system-ui, sans-serif;
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-float: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --focus-ring: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));

  /* ── 2. Puente Bootstrap 5.3: sus variables apuntan a nuestros tokens ── */
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--color-foreground);
  --bs-body-color-rgb: 15, 23, 42;
  --bs-body-bg: var(--color-background);
  --bs-emphasis-color: var(--color-foreground);
  --bs-secondary-color: var(--color-muted-foreground);
  --bs-tertiary-bg: var(--color-muted);
  --bs-primary: #D32027;
  --bs-primary-rgb: 211, 32, 39;
  --bs-danger: #EF4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-border-color: var(--color-border);
  --bs-border-width: 1px;
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--color-foreground);
  --bs-link-color-rgb: 15, 23, 42;
  --bs-link-hover-color: var(--color-primary);
  --bs-link-hover-color-rgb: 211, 32, 39;
  --bs-focus-ring-color: hsl(var(--ring) / 0.5);
  --bs-box-shadow-sm: var(--shadow-card);
  --bs-box-shadow: var(--shadow-float);
}

body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-foreground);
  background: var(--color-background);
}

/* Todo borde sin color explícito es borde piedra. */
*, ::before, ::after { border-color: var(--color-border); }

/* Tipografía: headline (h1) y title (h2/h3 de sección, títulos de card). */
h1, .h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
h2, .h2, h3, .h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 0; }

/* Foco visible: anillo rojo de marca, 2px con 2px de separación. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* La plantilla de Blazor quita el foco del h1 tras navegar; mantenemos ese comportamiento. */
h1:focus { outline: none; box-shadow: none; }

/* ── 3. Componentes Bootstrap reestilizados ─────────────────────────────── */

/* Botones: 40px, rounded-md, peso 500. */
.btn {
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-focus-box-shadow: var(--focus-ring);
  min-height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background-color 150ms, color 150ms;
}
.btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.25rem; min-height: 2.25rem; }
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-font-size: 0.875rem; min-height: 2.75rem; }
.btn .bi, .btn svg { width: 1rem; height: 1rem; }

/* Primaria: una por vista. */
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #D32027; --bs-btn-border-color: #D32027;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #D7363D; --bs-btn-hover-border-color: #D7363D;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #BD1D23; --bs-btn-active-border-color: #BD1D23;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #D32027; --bs-btn-disabled-border-color: #D32027;
  --bs-btn-disabled-opacity: 0.5;
}
/* Outline: acción secundaria por defecto. Usar .btn-outline-secondary (o .btn-outline). */
.btn-outline-secondary, .btn-outline, .btn-outline-primary, .btn-light, .btn-secondary {
  --bs-btn-color: var(--color-foreground); --bs-btn-bg: var(--color-background);
  --bs-btn-border-color: var(--color-input);
  --bs-btn-hover-color: var(--color-foreground); --bs-btn-hover-bg: var(--color-muted);
  --bs-btn-hover-border-color: var(--color-input);
  --bs-btn-active-color: var(--color-foreground); --bs-btn-active-bg: var(--color-muted);
  --bs-btn-active-border-color: var(--color-input);
  --bs-btn-disabled-color: var(--color-foreground); --bs-btn-disabled-bg: var(--color-background);
  --bs-btn-disabled-border-color: var(--color-input);
}
/* Icono en botón outline: rojo de marca. */
.btn-outline-secondary .bi, .btn-outline-secondary svg, .btn-outline .bi, .btn-outline svg { color: var(--color-primary); }
/* Ghost: acciones de fila, "Limpiar filtros". */
.btn-ghost, .btn-link {
  --bs-btn-color: var(--color-foreground); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--color-foreground); --bs-btn-hover-bg: var(--color-muted);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--color-muted);
  text-decoration: none;
}
/* Destructive: solo en diálogos de borrado. */
.btn-danger {
  --bs-btn-color: var(--color-destructive-foreground); --bs-btn-bg: #EF4444; --bs-btn-border-color: #EF4444;
  --bs-btn-hover-bg: #F15757; --bs-btn-hover-border-color: #F15757;
  --bs-btn-active-bg: #DC2626; --bs-btn-active-border-color: #DC2626;
}

/* Cards: borde piedra, rounded-lg, sombra mínima, padding 24px. */
.card {
  --bs-card-border-color: var(--color-border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.5rem;
  --bs-card-cap-bg: transparent;
  --bs-card-bg: var(--color-card);
  box-shadow: var(--shadow-card);
}
.card-header, .card-footer { border-color: var(--color-border); }
.card-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }

/* Inputs / selects: 40px, borde input, foco con anillo rojo. */
.form-control, .form-select {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-foreground);
  background-color: var(--color-background);
  border: 1px solid var(--color-input);
  border-radius: var(--radius-md);
}
.form-control::placeholder { color: var(--color-muted-foreground); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--color-input);
  box-shadow: var(--focus-ring);
}
.form-check-input:checked { background-color: #D32027; border-color: #D32027; }
.form-label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--color-foreground); }
.form-text { color: var(--color-muted-foreground); }
.invalid-feedback, .validation-message { color: var(--color-destructive); font-size: 0.875rem; }
/* Validación de Blazor (EditForm): sin contornos verdes/rojos de la plantilla. */
.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { outline: none; border-color: var(--color-destructive) !important; }

/* Badges: pill, label 12px/600. */
.badge { border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; }
.badge.bg-primary, .badge-default { background-color: #D32027 !important; color: #fff; }
.badge.bg-secondary, .badge-secondary { background-color: var(--color-muted) !important; color: var(--color-foreground); }
.badge.bg-danger, .badge-destructive { background-color: #EF4444 !important; color: var(--color-destructive-foreground); }
.badge-outline { background: transparent; color: var(--color-foreground); border: 1px solid var(--color-border); }

/* Tablas: cabecera gris piedra, filas 44px, sin cebra, hover suave. */
.table {
  --bs-table-color: var(--color-foreground);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: hsl(var(--muted) / 0.5);
  --bs-table-hover-color: var(--color-foreground);
  margin-bottom: 0;
  font-size: 0.875rem;
}
.table > thead > tr > th {
  background: var(--color-muted);
  color: var(--color-foreground); /* tinta gris sobre gris piedra no llega a AA (4.3:1) */
  font-size: 0.75rem; font-weight: 600;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
.table > tbody > tr > td { height: 2.75rem; padding: 0.5rem 1rem; vertical-align: middle; }
.table .num, .table td.text-end { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.ag-actions { text-align: right; white-space: nowrap; width: 1%; }
.table td.ag-actions .btn + .btn { margin-left: 0.25rem; }
.table-empty { text-align: center; color: var(--color-muted-foreground); padding: 2rem 1rem !important; }
/* Tabla dentro de card: padding 0 y esquinas redondeadas. */
.card > .table-responsive, .card > .table { border-radius: var(--radius-lg); overflow: hidden; }

/* Diálogos (modal Bootstrap o componente propio). */
.modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.modal-header, .modal-footer { border-color: var(--color-border); }
.modal-title { font-size: 1.125rem; font-weight: 600; }
.modal-backdrop.show { opacity: 0.8; }

/* Alertas → estados en banner. */
.alert { border-radius: var(--radius-md); font-size: 0.875rem; }
.alert-success { color: var(--success); background: var(--success-surface); border-color: var(--success-surface); }
.alert-warning { color: var(--warning); background: var(--warning-surface); border-color: var(--warning-border); }
.alert-danger { color: var(--color-destructive-foreground); background: #EF4444; border-color: #EF4444; }
.alert-info, .alert-primary { color: var(--color-foreground); background: var(--color-muted); border-color: var(--color-border); }

/* ── 4. Piezas propias del panel (no existen en Bootstrap) ──────────────── */

/* Cabecera de página: h1 a la izquierda, acción primaria a la derecha. */
.ag-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }

/* Barra de filtros encima de la tabla. */
.ag-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 1rem; }
.ag-filters .ag-filters-clear { margin-left: auto; }

/* Menú lateral: blanco, borde derecho, item activo en gris piedra (sin barras de color). */
.ag-sidebar { width: 240px; background: var(--color-background); border-right: 1px solid var(--color-border); padding: 0.75rem; }
.ag-sidebar .nav-link {
  display: flex; align-items: center; gap: 0.625rem;
  min-height: 2.5rem; padding: 0 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-foreground); font-weight: 500; font-size: 0.875rem;
}
.ag-sidebar .nav-link .bi, .ag-sidebar .nav-link svg { color: var(--color-muted-foreground); width: 1rem; height: 1rem; }
.ag-sidebar .nav-link:hover { background: hsl(var(--muted) / 0.6); color: var(--color-foreground); }
.ag-sidebar .nav-link.active { background: var(--color-muted); font-weight: 600; }

/* Header superior: blanco, 56px, logo 32px, borde inferior. */
.ag-topbar { height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.5rem; background: var(--color-background); border-bottom: 1px solid var(--color-border); }
.ag-topbar img { height: 2rem; width: auto; }

/* Banner de estado a todo el ancho. */
.ag-status { padding: 0.5rem 1rem; font-size: 0.875rem; text-align: center; border-bottom: 1px solid transparent; }
.ag-status-success { color: var(--success); background: var(--success-surface); }
.ag-status-warning { color: var(--warning); background: var(--warning-surface); border-color: var(--warning-border); }
.ag-status-error { color: var(--color-destructive-foreground); background: var(--color-destructive); font-weight: 500; }

/* Etiqueta de dato ("CONTACTO"): label 12px/600 en tinta gris. */
.ag-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-muted-foreground); }

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}