/* ============================================================================
   GUÍA DE ESTILO — Reclamos Edilicios
   ============================================================================
   No es un sistema de diseño completo, son reglas mínimas para que las
   pantallas no queden resueltas cada una por separado. Si agregás una
   pantalla nueva, empezá enlazando este archivo y usando estas clases antes
   de inventar una nueva regla suelta.

   1) JERARQUÍA DE BOTONES (3 niveles, no más)
      - .btn-primary (o <button class="primary">): LA acción principal de la
        pantalla o del bloque — "Cargar reclamo", "Cambiar estado", "Confirmar
        aprobación", "Gestionar reclamo". Fondo azul, texto blanco. Como mucho
        una o dos por bloque, para que siga leyéndose como "la" acción.
      - .btn-secondary: acciones de apoyo, no destructivas — "Volver",
        "Cancelar", "Rechazar". Mismo tamaño/padding que el primario, pero sin
        color de fondo (borde gris, texto oscuro), para que no compita.
      - Enlace de texto simple (<a> suelto, sin clase de botón): SOLO para
        navegación del header (Tablero/Reclamos/Proveedores/Cerrar sesión) o
        acciones incidentales dentro de una fila de tabla ("Editar",
        "Descargar"). Nunca para una acción de nivel de página — si el enlace
        representa algo que el usuario vino a hacer en esta pantalla ("volver
        al listado", "gestionar este reclamo"), es un botón, no un link.

   2) COLORES — paleta de 6 colores con nombre (variables --color-*, ver
      :root abajo), mismo significado en todo el sitio, no se reinterpretan
      por pantalla. El resto del sitio usa los alias cortos (--blue, --alta,
      etc.) — son el mismo color, solo un nombre más corto para no repetir
      "--color-" en cada regla:
      - Accent / Azul (--color-accent / --blue): acción primaria /
                             identificador neutro (ej. tag de Ámbito "UF").
      - Danger / Rojo (--color-danger / --alta): prioridad Alta, carril de
                             emergencia, "Deudor", solicitud "Rechazada".
      - Warning / Ámbar (--color-warning / --media): prioridad Media, avisos
                             pendientes de revisar/aprobar, "Revisa: fulano".
      - Success / Verde (--color-success / --baja): prioridad Baja,
                             "Resuelto", "Al día", solicitud "Aprobada",
                             presupuesto "Aprobado".
      - Ink / Muted (--color-ink, --color-muted): texto principal y texto
                             secundario sin urgencia (badges de Estado del
                             reclamo, Rubro de proveedor).
      - Canvas / Surface (--color-canvas, --color-surface): fondo de página
                             vs. fondo de tarjetas — el contraste entre estos
                             dos es lo que hace "flotar" cada tarjeta.
      Cada color de estado tiene su variante "-bg" (fondo clarito) para usar
      como badge/chip: texto en el color fuerte, fondo en el color "-bg".

   3) ESCALA TIPOGRÁFICA (--text-xs a --text-lg, ver :root) — nada por debajo
      de --text-xs, y las acciones nunca en el tamaño más chico:
      - --text-lg (1.15rem): título del sitio, en el header.
      - --text-md (0.95rem): títulos de sección (h2 dentro de .panel).
      - --text-base (0.85rem): botones, inputs, texto de cuerpo.
      - --text-sm (0.78rem): labels, meta-información (fechas, "Cargado
        por"), notas.
      - --text-xs (0.7rem): badges/chips/tags — está bien que sean chicos
        porque son *información*, no acciones; lo que no puede ser chico es
        un botón o un link que representa una acción de página.

   4) SUPERFICIES — --radius-sm (8px) para controles chicos (botones, inputs,
      chips), --radius-lg (16px) para tarjetas/paneles/carriles. Sombra
      siempre suave y de dos capas (--shadow-sm para elementos chicos,
      --shadow-md para tarjetas/paneles) — nunca un borde seco sin sombra
      para separar una tarjeta del fondo.

   Este archivo cubre lo compartido (variables, header, paneles, formularios,
   botones, badges genéricos). Cada pantalla puede seguir teniendo su propio
   <style> para lo que es realmente específico de esa pantalla (el layout de
   las tarjetas de reclamos, por ejemplo) — la idea es no duplicar lo común,
   no eliminar el <style> por completo. Si agregás tamaños o colores nuevos
   ahí, reusá estas variables en vez de escribir un rem o un hex suelto.
   ============================================================================ */

:root{
  /* ---- Paleta (6 colores con nombre) — mismo significado en todo el sitio,
     ver punto 2 de la guía más abajo. No se reinterpretan por pantalla. ---- */
  --color-canvas:  #f4f5f7;  /* Canvas — fondo de página, detrás de las tarjetas */
  --color-surface: #ffffff;  /* Surface — tarjetas, paneles, header, inputs */
  --color-border:  #e3e5eb;  /* Border — separadores y bordes sutiles */
  --color-ink:     #1c212b;  /* Ink — texto principal */
  --color-muted:   #6b7280;  /* Muted — texto secundario, meta-información */
  --color-accent:  #2563eb;  /* Accent (azul) — acción primaria, identificador neutro */
  --color-danger:  #dc2626;  /* Danger (rojo) — Alta, emergencia, deudor, rechazado */
  --color-warning: #d97706;  /* Warning (ámbar) — Media, pendiente de revisar/aprobar */
  --color-success: #16a34a;  /* Success (verde) — Baja, resuelto, aprobado, al día */

  /* Alias históricos — el resto del sitio ya los usa así, se mantienen para
     no forzar un refactor de cada pantalla al tocar la paleta. */
  --bg: var(--color-canvas);
  --panel: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-ink);
  --muted: var(--color-muted);
  --blue: var(--color-accent);
  --alta: var(--color-danger);
  --media: var(--color-warning);
  --baja: var(--color-success);

  --blue-light:#eaf1ff;
  --alta-bg:#fdecec;
  --media-bg:#fef3e2;
  --baja-bg:#eafaf0;
  --emerg-bg:#43110f; /* variante oscura de --danger para el carril de emergencia */

  /* ---- Escala tipográfica — de menor a mayor jerarquía. Usar estas
     variables en vez de tamaños sueltos nuevos. ---- */
  --text-xs:   0.7rem;    /* badges/chips */
  --text-sm:   0.78rem;   /* labels, meta-información, notas */
  --text-base: 0.85rem;   /* cuerpo, botones, inputs */
  --text-md:   0.95rem;   /* títulos de sección (h2 dentro de .panel) */
  --text-lg:   1.15rem;   /* título del sitio (h1 del header) */

  /* ---- Sombra suave — tarjeta "levantada", nunca plana contra el fondo ---- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
  --shadow-md: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px rgba(15,23,42,.07);
  --shadow: var(--shadow-md); /* alias histórico */

  --radius-sm: 8px;   /* botones, inputs, chips pequeños */
  --radius-lg: 16px;  /* tarjetas, paneles, carriles */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
}

/* Header — franja de fondo suave (distinta del blanco de las tarjetas y del
   gris del canvas) para que se lea como una banda propia. Título centrado;
   la zona de usuario se ancla a la derecha con posición absoluta para no
   correr el centrado del título. */
header{
  position:relative;
  background:#f9fafc; border-bottom:1px solid var(--border); padding:22px 32px;
}
header .header-titulo{ text-align:center; }
header h1{ font-size:var(--text-lg); font-weight:700; margin:0; letter-spacing:-.01em; }
header .header-subtitulo{ margin:3px 0 0; font-size:var(--text-sm); color:var(--muted); }

/* Zona de usuario — nombre + rol, con Cambiar contraseña / Cerrar sesión en un menú aparte */
.user-menu{ position:absolute; right:32px; top:50%; transform:translateY(-50%); }
.user-menu-toggle{ display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font:inherit; font-size:var(--text-sm); font-weight:600; color:var(--text); padding:6px 4px; }
.user-menu-toggle:hover{ background:none; }
.user-menu-toggle .chev{ color:var(--muted); font-size:0.7rem; }
.user-menu-panel{
  position:absolute; right:0; top:calc(100% + 6px); min-width:210px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:6px; z-index:20;
}
.user-menu-panel a{ display:block; margin:0; padding:9px 10px; border-radius:6px; font-size:var(--text-sm); font-weight:500; color:var(--text); text-decoration:none; }
.user-menu-panel a:hover{ background:#f0f1f4; text-decoration:none; }

/* Pestañas de navegación — franja propia debajo del header, botones reales
   (fondo, borde, radio), no enlaces de texto sueltos. La activa se resalta
   con el mismo azul de .btn-primary. */
.nav-tabs{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:12px 32px; background:var(--panel); border-bottom:1px solid var(--border);
}
.nav-tabs a{
  padding:8px 18px; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:600;
  background:var(--panel); border:1px solid var(--border); color:var(--text); text-decoration:none;
}
.nav-tabs a:hover{ background:#f0f1f4; text-decoration:none; }
.nav-tabs a.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* Aviso de uso interno — chip centrado, no una franja de texto plano */
.aviso-uso-interno{ display:flex; justify-content:center; padding:10px 12px 0; }
.aviso-uso-interno span{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue-light); color:var(--blue); border:1px solid rgba(37,99,235,.12);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.02em;
  padding:5px 14px; border-radius:999px;
}

/* Footer — centrado, con línea divisoria arriba para separarlo del contenido */
footer{
  text-align:center; margin-top:32px; padding:22px 20px;
  border-top:1px solid var(--border); color:var(--muted); font-size:var(--text-sm);
}
footer p{ margin:0 0 4px; }
footer p:last-child{ margin-bottom:0; }
footer .footer-titulo{ font-weight:700; color:var(--text); }
footer a{ color:var(--muted); text-decoration:underline; }
footer a:hover{ color:var(--blue); }

/* Paneles */
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-md); }
.panel h2{ font-size:var(--text-md); font-weight:700; margin:0 0 14px; }
.empty{ padding:16px; text-align:center; color:var(--muted); font-size:var(--text-base); }
.nota{ font-size:var(--text-sm); color:var(--muted); }

/* Mensajes de resultado */
.ok-msg{ padding:10px 12px; border-radius:var(--radius-sm); background:var(--baja-bg); color:var(--baja); font-size:var(--text-base); font-weight:600; }
.error-msg{ padding:10px 12px; border-radius:var(--radius-sm); background:var(--alta-bg); color:var(--alta); font-size:var(--text-base); font-weight:600; }

/* Formularios */
label{ display:block; font-size:var(--text-sm); font-weight:600; color:var(--muted); margin:12px 0 5px; }
label:first-child{ margin-top:0; }
input[type=text], input[type=number], input[type=date], input[type=file], select, textarea{
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; background:#fff; color:var(--text);
}
textarea{ resize:vertical; min-height:60px; }
fieldset{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:12px 0 0; }
fieldset legend{ font-size:var(--text-sm); font-weight:600; color:var(--muted); padding:0 4px; }
.radio-row, .check-row{ display:flex; align-items:flex-start; gap:8px; padding:6px 0; font-size:var(--text-base); cursor:pointer; }
.radio-row input, .check-row input{ margin-top:3px; }

/* Botones — ver la jerarquía de 3 niveles explicada arriba */
button{ font:inherit; cursor:pointer; border:1px solid var(--border); background:var(--panel); padding:9px 16px; border-radius:var(--radius-sm); color:var(--text); font-size:var(--text-base); }
button:hover{ background:#f0f1f4; }

.btn-primary, button.primary{
  display:inline-block; text-decoration:none; text-align:center;
  background:var(--blue); border:1px solid var(--blue); color:#fff;
  font:inherit; font-weight:600; font-size:var(--text-base); cursor:pointer;
  padding:9px 16px; border-radius:var(--radius-sm);
}
.btn-primary:hover, button.primary:hover{ background:#1d4fd1; }

.btn-secondary{
  display:inline-block; text-decoration:none; text-align:center;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  font:inherit; font-weight:600; font-size:var(--text-base); cursor:pointer;
  padding:9px 16px; border-radius:var(--radius-sm);
}
.btn-secondary:hover{ background:#f0f1f4; }

.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }

/* Badges / chips — informativos, nunca clickeables. Los pares color/color-bg
   siguen siempre el mismo significado (ver punto 2 de la guía, arriba).
   .chip trae gris neutro por defecto (así se usa hoy para Alcance/Gravedad/
   etc.); .badge no trae color propio, siempre se combina con un badge-*. */
.badge, .chip{ display:inline-block; font-size:var(--text-xs); font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.chip{ background:#eef0f3; color:var(--muted); }
.badge-neutro{ background:#eef0f3; color:var(--muted); }
.badge-azul{ background:var(--blue-light); color:var(--blue); }
.badge-rojo{ background:var(--alta-bg); color:var(--alta); }
.badge-ambar{ background:var(--media-bg); color:var(--media); }
.badge-verde{ background:var(--baja-bg); color:var(--baja); }

/* Tablas */
table{ width:100%; border-collapse:collapse; font-size:var(--text-base); }
th{ text-align:left; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:8px; border-bottom:1px solid var(--border); }
td{ padding:10px 8px; border-bottom:1px solid var(--border); }

/* Widget flotante "Tareas pendientes" (includes/widget_pendientes.php) — visible en todo el sitio */
.widget-pendientes{ position:fixed; right:20px; bottom:20px; z-index:1000; }
.widget-pendientes-toggle{
  background:var(--alta); color:#fff; border:none; border-radius:999px;
  width:52px; height:52px; font-size:1rem; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px rgba(28,33,43,.22);
}
.widget-pendientes-panel{
  position:absolute; right:0; bottom:62px; width:280px; max-height:320px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px;
  box-shadow:var(--shadow-md);
}
.widget-pendientes-panel strong{ display:block; font-size:var(--text-base); margin-bottom:8px; }
.widget-pendientes-item{ display:block; padding:7px 0; border-top:1px solid var(--border); font-size:var(--text-sm); color:var(--text); text-decoration:none; }
.widget-pendientes-item:first-of-type{ border-top:none; }
.widget-pendientes-item:hover{ color:var(--blue); }