/* ===================================================================
   Apama — tema visual unificado (2026-07-12)
   Inspirado en el restyling de DigiWork: fuente suave, esquinas
   ligeramente redondeadas, look mobile-first, verde de marca de Apama.
   Se carga DESPUES de main.css para sobrescribir el tema oscuro
   "Spectral" original y unificar colores dispares (#007bff, #464E55,
   #866087, etc.) heredados de estilos inline sueltos por pagina.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;900&display=swap');

:root {
  /* Sin esto, con el sistema/navegador en modo oscuro, Chrome pinta los
     desplegables nativos (<select>, selector de fecha...) con el tema
     oscuro del sistema aunque la pagina sea clara — es lo que hacia
     que el desplegable del cuestionario se viera oscuro al abrirlo. */
  color-scheme: light;

  --primary:     #498C5E;
  --primary-dark:#3a6f4a;
  --primary-10:  rgba(73, 140, 94, 0.10);
  --primary-30:  rgba(73, 140, 94, 0.30);
  --bg:          #f3f6f4;
  --card:        #ffffff;
  --border:      #dde3df;
  --text:        #23291f;
  --muted:       #6b7280;
  --danger:      #dc2626;
  --danger-10:   rgba(220, 38, 38, 0.10);
  --success:     #16a34a;
  --warning:     #d97706;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 2px 10px rgba(0, 0, 0, 0.07);
  --shadow-lg:   0 4px 24px rgba(0, 0, 0, 0.14);
  --transition:  0.2s ease;
}

/* ---------- Base ---------- */

body, input, select, textarea {
  font-family: 'DM Sans', "Open Sans", Helvetica, sans-serif;
  letter-spacing: normal;
}

body {
  background: var(--bg);
  color: var(--text);
}

#wrapper, #main, .wrapper {
  background: var(--bg) !important;
  color: var(--text);
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; }

/* strong/b venian en blanco (pensado para el tema oscuro original);
   sobre tarjetas claras se volvian invisibles, p.ej. las etiquetas
   "Tipo:", "Importe:", "Adoptante:" de las tarjetas de contratos. */
strong, b { color: inherit !important; }

/* Igual que strong/b: muchos formularios (c1.php, c2.php,
   cuestionario.php...) ponen "label { color: #eee }" pensado para
   tarjeta oscura; sobre las tarjetas claras nuevas casi no se ve
   ("Tipo de cuestionario:", "Tipo de animal:", "Mascota:"...). */
label { color: var(--text) !important; }
.user-data { color: var(--text) !important; }

/* header.major = cabecera de introduccion de seccion, usada en casi
   toda la web (plantilla original la pensaba en blanco sobre fondo
   oscuro; aqui pasa a texto oscuro con acento verde). */
header.major h2, header.major h3, header.major h4,
header.major h5, header.major h6 {
  border-bottom-color: var(--primary-30) !important;
}

header.major p {
  color: var(--muted) !important;
}

/* ---------- Cabecera / navegacion ---------- */

#header {
  background: var(--primary);
  box-shadow: var(--shadow);
}

#header.alt {
  background: rgba(73, 140, 94, 0.92);
}

/* ---------- Portada / hero (#banner) ----------
   El h1..h6 global de mas abajo pone texto oscuro (pensado para fondo
   claro). La portada usa una seccion de fondo oscuro con degradado
   propio de la plantilla original, asi que aqui se sobrescribe con el
   verde de marca y se mantiene el texto en blanco para que sea legible. */

#banner {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}

#banner h2, #banner p, #banner .more {
  color: #fff !important;
}

#banner h2:before, #banner h2:after {
  background: rgba(255, 255, 255, 0.4) !important;
}

#banner .more:before {
  filter: brightness(0) invert(1);
}

#header nav > ul > li > a {
  letter-spacing: 0.08em;
  font-weight: 600;
}

#menu {
  background: var(--card);
  border-radius: 0 0 0 var(--radius);
  box-shadow: var(--shadow-lg);
}

#menu ul li a {
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

#menu ul li a:hover {
  background: var(--primary-10);
  color: var(--primary-dark) !important;
}

#menu .icon-menu a {
  color: var(--primary) !important;
}

/* ---------- Botones ----------
   OJO: el fondo/color NO llevan !important a proposito. Varias paginas
   ya usan sus propios colores con significado (p.ej. search_contracts.php:
   .firmar verde, .buscar morado, .copiar-link beige, .delete rojo) sobre
   elementos que ademas tienen class="button". Si aqui forzamos con
   !important, esos matices desaparecen y todo se ve del mismo verde
   (incluido "Eliminar", que debe ser rojo). Al no llevar !important, la
   regla mas especifica/posterior de cada pagina gana de forma normal, y
   esta solo actua como estilo por defecto para botones sin color propio. */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  background: var(--primary-dark);
  color: #fff;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--transition), transform var(--transition), filter var(--transition);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.button.secondary,
button.secondary,
.btn-secondary {
  background: var(--muted);
}

.button.danger,
button.danger,
.btn-danger {
  background: var(--danger);
}

/* Red de seguridad: cualquier boton de borrar/eliminar, tenga o no ya
   su propio color, se ve siempre rojo — es una acción destructiva y
   debe distinguirse claramente de "Ver PDF"/"Firmar"/etc. Con
   !important para que gane incluso si una pagina lo dejo en el verde
   por defecto de .button. */
.delete, .btn-delete, .eliminar,
[id*="eliminar" i], [class*="eliminar" i],
[id*="_delete" i] {
  background: var(--danger) !important;
}

.delete:hover, .btn-delete:hover, .eliminar:hover,
[id*="eliminar" i]:hover, [class*="eliminar" i]:hover,
[id*="_delete" i]:hover {
  filter: brightness(1.1);
}

/* ---------- Formularios ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="number"],
select,
textarea {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
}

/* main.css original trae "#usuario_id, option { background-color:
   #464E55 }" GLOBAL para todas las <option> del sitio (fondo oscuro
   pensado para el tema oscuro). Es lo que hacia que el desplegable
   se viera oscuro al abrirlo, independientemente del color-scheme. */
option {
  background-color: var(--card) !important;
  color: var(--text) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-10) !important;
}

/* ---------- Tarjetas ----------
   Cada pantalla reinventa el mismo componente de tarjeta con su propio
   nombre de clase (.card, .contract-card, .debt-card, .animal-card...)
   y un fondo oscuro (#464E55) con texto blanco hardcodeado. Se unifican
   aqui todas con el mismo look claro/redondeado, forzando con
   !important porque cada pagina las declara en un <style> propio. */

.card,
.contract-card,
.debt-card,
.animal-card,
.nombre_animal_card,
.botones_card,
.datos_card {
  background: var(--card) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border);
}

.card h2, .card h3, .card h4, .card p, .card span,
.contract-card h2, .contract-card h3, .contract-card h4, .contract-card p, .contract-card span,
.debt-card h2, .debt-card h3, .debt-card h4, .debt-card p, .debt-card span,
.animal-card h2, .animal-card h3, .animal-card h4, .animal-card p, .animal-card span {
  color: var(--text) !important;
}

/* Solo los enlaces "tarjeta-imagen" (grid de especies en adopcion.php:
   una foto + una etiqueta, sin fondo de boton propio) necesitan texto
   oscuro para no quedar invisibles sobre la tarjeta blanca. Los enlaces
   que SI son botones (texto con su propio fondo de color, como en el
   panel de administracion) deben conservar su color propio (blanco), o
   se vuelven ilegibles sobre fondos oscuros/de color. */
.card a:not(.button):has(img),
.contract-card a:not(.button):has(img),
.debt-card a:not(.button):has(img),
.animal-card a:not(.button):has(img) {
  color: var(--text) !important;
}

.card a.button,
.card .button,
.contract-card a.button,
.contract-card .button,
.debt-card a.button,
.debt-card .button,
.animal-card a.button,
.animal-card .button {
  background: var(--primary-dark);
  color: #fff;
}

/* ---------- Modales (Bootstrap) ----------
   Apama ya usa modales de Bootstrap en varias pantallas; en vez de
   introducir un sistema nuevo, se les da aqui el mismo lenguaje visual
   (esquinas redondeadas, sombra suave, verde de marca) para que sean
   coherentes y comodos en movil. */

.modal-content {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: 'DM Sans', "Open Sans", Helvetica, sans-serif;
  color: var(--text);
  overflow: hidden;
}

.modal-header {
  background: var(--primary);
  color: #fff;
  border-bottom: none !important;
  padding: 16px 20px;
}

.modal-header .modal-title { color: #fff; font-weight: 700; }

.modal-header .btn-close,
.modal-header .close {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.modal-body { padding: 20px; }

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 12px 20px;
}

.modal-footer .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  border-radius: var(--radius-sm) !important;
}

.modal-footer .btn-secondary {
  border-radius: var(--radius-sm) !important;
}

.modal-footer .btn-danger {
  border-radius: var(--radius-sm) !important;
}

@media screen and (max-width: 736px) {
  .modal-dialog {
    margin: 0.75rem;
  }
}

/* ---------- Select2 (buscador de animal/usuario en nuevo contrato,
   editar animal, busqueda avanzada) ----------
   Traen su propio tema oscuro (#464E55/blanco) cableado en un <style>
   por pagina; se sobrescribe aqui para que combine con el resto. */

.select2-container--default .select2-selection--single,
.select2-dropdown,
.select2-search__field {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important;
}

.select2-container--default .select2-results__option {
  color: var(--text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* ---------- Footer ---------- */

#footer {
  background: #2f3a33;
}

/* ---------- Utilidades ---------- */

.rounded-soft { border-radius: var(--radius) !important; }