/*
 * Hoja fuente de la interfaz v2 (Basecoat + Tailwind v4).
 * Se compila con `npm run build` a public/css/app.css; no editar el compilado.
 */
@import "tailwindcss";
@import "basecoat-css/rhea";

@source "../app/views/**/*.php";
@source "../public/assets/js/ui-v2.js";

/* Identidad Rino: sobrescribe los tokens neutros de Basecoat. */
:root {
  --radius: 0.75rem;

  --background: #f6f8fb;
  --foreground: #142b43;
  --card: #ffffff;
  --card-foreground: #142b43;
  --popover: #ffffff;
  --popover-foreground: #142b43;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #eef3f9;
  --secondary-foreground: #142b43;
  --muted: #eef3f9;
  --muted-foreground: #52657b;
  --accent: #e3ecf8;
  --accent-foreground: #142b43;
  --destructive: #c41f33;
  --border: #d6e0ec;
  --input: #c9d7e8;
  --ring: #2563eb;

  --success: #0b7541;
  --success-soft: #daf2e5;
  --warning: #8d5a00;
  --warning-soft: #fdeecf;
  --info-soft: #dbeafe;
  --danger-soft: #fce1e5;

  --sidebar: #142b43;
  --sidebar-foreground: #c7d4e3;
  --sidebar-primary: #2563eb;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1f3a57;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #213d5c;
  --sidebar-ring: #60a5fa;
}

.dark {
  --background: #0d1826;
  --foreground: #e6edf5;
  --card: #132235;
  --card-foreground: #e6edf5;
  --popover: #16283d;
  --popover-foreground: #e6edf5;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --secondary: #1b2e45;
  --secondary-foreground: #e6edf5;
  --muted: #1b2e45;
  --muted-foreground: #9fb1c5;
  --accent: #223a56;
  --accent-foreground: #ffffff;
  --destructive: #f2596b;
  --border: #243a53;
  --input: #2d4661;
  --ring: #60a5fa;

  --success: #4ade80;
  --success-soft: #0f3323;
  --warning: #fbbf24;
  --warning-soft: #3a2a09;
  --info-soft: #172f55;
  --danger-soft: #3d1419;

  --sidebar: #0a1422;
  --sidebar-foreground: #b9c7d8;
  --sidebar-accent: #172a40;
  --sidebar-border: #1a2d44;
}

@theme {
  --font-sans: "Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: "Oxanium", ui-sans-serif, system-ui, sans-serif;
  --color-success: var(--success);
  --color-success-soft: var(--success-soft);
  --color-warning: var(--warning);
  --color-warning-soft: var(--warning-soft);
  --color-info-soft: var(--info-soft);
  --color-danger-soft: var(--danger-soft);
}

@layer base {
  body {
    @apply font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6,
  .font-heading {
    font-family: var(--font-heading);
  }

  :focus-visible {
    @apply outline-2 outline-offset-2 outline-ring;
  }

  [x-cloak],
  [hidden] {
    display: none !important;
  }
}

@layer components {
  /* Badges semánticos (Monday-like: chip sólido con texto blanco). */
  .badge[data-tone="success"] { @apply border-transparent bg-[#00C875] text-white; }
  .badge[data-tone="warning"] { @apply border-transparent bg-[#FDAB3D] text-white; }
  .badge[data-tone="info"]    { @apply border-transparent bg-[#579BFC] text-white; }
  .badge[data-tone="danger"]  { @apply border-transparent bg-[#E2445C] text-white; }
  .badge[data-tone="orange"]  { @apply border-transparent bg-[#FF6D3B] text-white; }

  /* Selects compactos tipo Monday dentro de la tabla. */
  .select-pill {
    @apply box-border h-7 w-full max-w-full rounded-lg border-transparent py-0 pe-7 ps-2.5 text-[11px] font-extrabold uppercase tracking-wide text-white shadow-sm;
  }
  .select-pill[data-tone="success"] { @apply bg-[#00C875] text-white; }
  .select-pill[data-tone="warning"] { @apply bg-[#FDAB3D] text-white; }
  .select-pill[data-tone="info"]    { @apply bg-[#579BFC] text-white; }
  .select-pill[data-tone="danger"]  { @apply bg-[#E2445C] text-white; }
  .select-pill[data-tone="orange"]  { @apply bg-[#FF6D3B] text-white; }
  .select-pill option {
    @apply bg-card font-semibold normal-case tracking-normal text-foreground;
  }

  /* Contenedor de desplazamiento horizontal para tablas anchas. */
  /* contain:paint evita que Chrome propague el ancho de la tabla al scroll de la página. */
  .table-scroll {
    @apply w-full overflow-x-auto rounded-xl border bg-card;
    contain: paint;
  }
  /* Deja espacio para un menú de fila que abre hacia abajo en tablas cortas. */
  .table-scroll:has([data-popover][data-side="bottom"][aria-hidden="false"]) {
    padding-bottom: 9rem;
  }
  .table-scroll > .table thead th {
    @apply sticky top-0 z-[1] border-b-0 bg-[#142b43] px-3 py-3 text-xs font-semibold uppercase tracking-wide text-white;
  }
  .dark .table-scroll > .table thead th {
    @apply bg-[#1f3a57] text-white;
  }
  .table-scroll > .table th,
  .table-scroll > .table td {
    @apply overflow-hidden align-middle;
  }
  /* Filas con acento de color según estado (estilo Monday). */
  .table-scroll > .table tbody tr[data-status] {
    @apply border-l-4 border-l-transparent;
  }
  .table-scroll > .table tbody tr[data-status="pending"] {
    border-left-color: #FDAB3D;
    background: linear-gradient(90deg, color-mix(in oklab, #FDAB3D 12%, transparent) 0%, transparent 48%);
  }
  .table-scroll > .table tbody tr[data-status="in_progress"] {
    border-left-color: #579BFC;
    background: linear-gradient(90deg, color-mix(in oklab, #579BFC 12%, transparent) 0%, transparent 48%);
  }
  .table-scroll > .table tbody tr[data-status="completed"] {
    border-left-color: #00C875;
    background: linear-gradient(90deg, color-mix(in oklab, #00C875 10%, transparent) 0%, transparent 48%);
  }
  .table-scroll > .table tbody tr:hover {
    @apply bg-primary/5;
  }
  .table-scroll .clan-chip {
    @apply box-border block w-full max-w-full truncate rounded-md bg-primary/15 px-2 py-1 text-xs font-semibold text-foreground;
  }

  /* Modal Nueva tarea: cabecera de marca + tarjetas de sección. */
  .task-modal > div {
    @apply gap-0 p-0;
  }
  .task-modal__hero {
    background:
      radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, #3b82f6 45%, transparent) 0%, transparent 55%),
      linear-gradient(135deg, #142b43 0%, #1e4a7a 55%, #2563eb 100%);
    @apply px-5 py-5 pe-12;
  }
  .task-modal__hero-icon {
    @apply flex size-11 shrink-0 items-center justify-center rounded-2xl bg-white/15 text-lg text-white shadow-inner ring-1 ring-white/25;
  }
  .dialog.task-modal > div > button.task-modal__close {
    @apply absolute end-3 top-3 z-10 inline-flex size-8 items-center justify-center rounded-full border border-white/30 bg-[#0a1422]/55 text-white opacity-100 shadow-sm backdrop-blur-sm transition hover:bg-[#0a1422]/80 hover:opacity-100 hover:text-white;
  }
  .dialog.task-modal > div > button.task-modal__close i {
    @apply text-sm leading-none text-white;
  }
  .task-modal section {
    @apply bg-background px-4 py-4;
  }
  .task-modal__card {
    @apply rounded-2xl border bg-card p-4 shadow-sm;
  }
  .task-modal__card-head {
    @apply mb-3 flex items-center gap-2 text-sm font-semibold text-foreground;
  }
  .task-modal__card-head > i {
    @apply text-primary;
  }
  .task-modal__card--kpi {
    @apply border-warning/40 bg-warning-soft;
  }
  .task-modal__footer {
    @apply flex items-center justify-end gap-2 border-t bg-card px-5 py-4;
  }
  .dark .task-modal__hero {
    background:
      radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, #60a5fa 35%, transparent) 0%, transparent 55%),
      linear-gradient(135deg, #0a1422 0%, #132235 50%, #1d4ed8 100%);
  }

  /* Estado de carga de htmx en regiones que se reemplazan. */
  .htmx-request.htmx-busy,
  .htmx-request .htmx-busy {
    @apply pointer-events-none opacity-60 transition-opacity;
  }
  .htmx-indicator { @apply hidden; }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator { @apply inline-flex; }

  /* Bloques de página homogéneos (todos los perfiles). */
  .page-card {
    @apply rounded-2xl border bg-card p-4 shadow-sm;
  }
  .page-card-head {
    @apply mb-3 flex items-center gap-2 text-sm font-semibold text-foreground;
  }
  .page-card-head > i {
    @apply text-primary;
  }
  .stat-tile {
    @apply flex min-w-24 flex-col-reverse rounded-xl border bg-card px-4 py-2;
  }
  .stat-tile dd {
    @apply text-xl font-bold leading-tight;
  }
  .stat-tile dt {
    @apply text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground;
  }
}

/* Barra lateral con fondo navy de marca: los textos de grupo quedan legibles. */
.sidebar nav h3 {
  color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
}