<?php


declare(strict_types=1);


header('Content-Type: text/css; charset=UTF-8');
header('Cache-Control: public, max-age=3600');
header('X-Content-Type-Options: nosniff');

?>
/* =========================================================
   Feedback Polish – extensión del tema Colinas del Oso
   (Sin tocar la paleta: usa tus CSS variables --ui-*)
   ========================================================= */

/* Contenedor hero de feedback */
.cdo-page-hero{
  border: 1px solid var(--ui-border);
  background: var(--ui-bg-card);
  border-radius: 1.25rem;
}

/* “Chips” de info */
.cdo-chip{
  border: 1px solid var(--ui-border);
  background: var(--ui-bg-main);
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .875rem;
}

/* Texto secundario */
.cdo-muted{
  color: var(--ui-text-secondary);
}

/* Cards del feedback */
.cdo-card{
  border: 1px solid var(--ui-border);
  border-radius: 1.25rem;
  background: var(--ui-bg-card);
}

/* Sombra suave */
.cdo-shadow{
  box-shadow: 0 .35rem 1.2rem rgba(0,0,0,.06);
}

/* Caja de ícono */
.cdo-iconbox{
  border: 1px solid var(--ui-border);
  background: var(--ui-bg-main);
  border-radius: 1rem;
  width: 56px;
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

/* Divisor */
.cdo-divider{
  border-top: 1px solid var(--ui-border);
}

/* Afinación ligera de controles para que “se sientan” del tema */
#feedbackForm .form-control,
#feedbackForm .form-select{
  border-color: var(--ui-border);
}

/* Focus ring alineado con tu variable */
#feedbackForm .form-control:focus,
#feedbackForm .form-select:focus,
#feedbackForm .form-check-input:focus,
#feedbackForm .form-range:focus{
  box-shadow: 0 0 0 .25rem var(--ui-focus-ring);
  border-color: var(--ui-brand-soft);
}

/* Range: hace que se vea menos “default” sin cambiar colores explícitos */
#feedbackForm .form-range{
  accent-color: var(--ui-brand-primary);
}

/* Botones outline: mejor coherencia visual (sin forzar paleta) */
#feedbackForm .btn-outline-secondary{
  border-color: var(--ui-border);
  color: var(--ui-text-secondary);
}

/* Alerts más “redonditos” */
#feedbackAlert{
  border-radius: 1rem;
}