/* =========================================================================
   Calculadora Genética de Agapornis — Hoja de estilos
   Estilo integrado con animalesbiologia.com:
   fondo melocotón, tarjeta blanca, cabeceras macho (azul) / hembra (rosa),
   secciones gris claro, botón azul marino.
   ========================================================================= */

:root {
  --bg:           #ffffff;   /* fondo melocotón del tema web */
  --panel:        #ffffff;
  --caja:         #f6f6f4;   /* cajas de sección gris muy claro */
  --texto:        #2c3340;
  --texto-suave:  #4a5568;
  --texto-tenue:  #8a8f99;
  --borde:        #e6e6e2;
  --borde-fuerte: #cfcfca;

  /* Acento general (botones secundarios, focus) */
  --acento:       #2c3e50;
  --acento-claro: #eef2f5;
  --acento-hover: #1f2c3a;

  /* Macho (azul) / Hembra (rosa) */
  --macho-bg:     #e7f3f9;
  --macho-txt:    #2b86b8;
  --macho-borde:  #bfe0ef;
  --hembra-bg:    #fce8ef;
  --hembra-txt:   #c44a7d;
  --hembra-borde: #f3cdda;

  /* Botón calcular */
  --boton:        #2c3e50;
  --boton-hover:  #1f2c3a;

  --rojo:         #c53030;
  --azul-tag:     #ebf4ff;
  --sombra:       0 4px 14px rgba(60,40,30,.08), 0 1px 3px rgba(0,0,0,.05);
  --radio:        10px;
  --radio-sm:     6px;
  --fuente:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* La app es la tarjeta blanca central (estilo calculadora de canarios) */
.app {
  max-width: 980px;
  margin: 28px auto;
  padding: 32px 34px 34px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
}

/* ---- Cabecera ---- */
.cabecera h1 {
  margin: 0 0 8px;
  font-family: var(--fuente-titulo);
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0;
  color: var(--texto);
}
.subtitulo {
  margin: 0 auto 26px;
  color: var(--texto-tenue);
  font-size: 14px;
  max-width: 640px;
  text-align: center;
}

/* ---- Paneles internos (sin sombra: ya están dentro de la tarjeta) ---- */
.panel,
.padre,
.resultados {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0;
  box-shadow: none;
}
.padre { overflow: hidden; }
.resultados { padding: 20px 22px; margin-top: 4px; }
.panel-especie { padding: 0; border: none; }

.panel-especie {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.panel-especie label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.panel-especie select {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: #fff;
  color: var(--texto);
  cursor: pointer;
  max-width: 520px;
}
.panel-especie select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}
.nota-especie {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--texto-tenue);
  font-style: italic;
}
.nota-especie:empty { display: none; }

/* ---- Padres ---- */
.padres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
/* Iframe estrecho / pantalla media (≤900px): los dos padres se apilan en una
   columna, pero cada fila SIGUE en línea "nombre | botones" con los botones
   pequeños. Así no hay megabotones ni columna interminable en el iframe del PC. */
@media (max-width: 900px) {
  .padres { grid-template-columns: 1fr; }
}

/* Móvil de verdad (≤560px): aquí sí se apila la fila y los botones se hacen
   táctiles a todo el ancho. !important para ganar al tema de WordPress. */
@media (max-width: 560px) {
  .fila-mutacion {
    display: block !important;
    padding: 10px 8px;
  }
  .fila-mutacion .nombre {
    margin-bottom: 8px;
  }
  .estado-grupo {
    width: 100% !important;
  }
  .estado-grupo button {
    padding: 11px 4px;
    font-size: 13px;
    white-space: normal;
    line-height: 1.2;
    min-height: 44px;
  }
}

/* Cabecera de cada progenitor: barra de color (azul macho / rosa hembra) */
.padre-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin: 0;
  border-bottom: 1px solid var(--macho-borde);
  background: var(--macho-bg);
}
.padre[data-sexo="hembra"] .padre-cab {
  background: var(--hembra-bg);
  border-bottom-color: var(--hembra-borde);
}
.padre-cab h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--macho-txt);
}
.padre[data-sexo="hembra"] .padre-cab h2 { color: var(--hembra-txt); }

.simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #fff;
  color: var(--macho-txt);
  font-size: 15px;
  font-weight: 700;
}
.padre[data-sexo="hembra"] .simbolo { color: var(--hembra-txt); }

/* ---- Mutaciones (filas) ---- */
.mutaciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
}
.fila-mutacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;   /* minmax(0,1fr): el nombre puede encogerse → no desborda en móvil */
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radio-sm);
  transition: background .12s ease;
}
.fila-mutacion:hover { background: var(--caja); }
.fila-mutacion .nombre {
  font-size: 14px;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.fila-mutacion .nombre-texto { line-height: 1.3; }
/* Contenedor de tags: siempre en su propia línea, debajo del nombre */
.fila-mutacion .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fila-mutacion .tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--azul-tag);
  color: #2c5282;
  font-weight: 600;
}
.fila-mutacion .tag.codom { background: #fef5e7; color: #975a16; }
.fila-mutacion .tag.serie { background: #f0e7fa; color: #5b2c92; }
.fila-mutacion .tag.rec { background: #e6f0ea; color: #2d5a3d; }

.estado-grupo {
  display: flex;
  width: 100%;                /* ocupa toda la columna de control → alineado */
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: #fff;
}
.estado-grupo button {
  appearance: none;
  flex: 1;                    /* los botones se reparten el ancho por igual */
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--texto-suave);
  cursor: pointer;
  border-right: 1px solid var(--borde);
  transition: all .12s ease;
  white-space: nowrap;
}
.estado-grupo button:last-child { border-right: none; }
.estado-grupo button:hover { background: var(--caja); }
.estado-grupo button.activo {
  background: var(--acento);
  color: #fff;
  font-weight: 600;
}
.estado-grupo button.activo:hover { background: var(--acento-hover); }

/* Patrón no visible en gato sólido: botones atenuados; la selección se marca en
   gris (no en color "activo") para reforzar que se porta pero no se ve. */
.estado-grupo.patron-atenuado button { color: var(--texto-suave); }
.estado-grupo.patron-atenuado button.activo { background: #9aa0a6; color: #fff; }
.estado-grupo.patron-atenuado button.activo:hover { background: #868b90; }
.select-locus.patron-atenuado { color: var(--texto-suave); background: var(--caja); }
.aviso-patron {
  font-size: 12px;
  color: var(--texto-suave);
  background: var(--caja);
  border-left: 3px solid #c9ccd1;
  padding: 6px 10px;
  border-radius: var(--radio-sm);
  margin: 4px 0 10px;
  line-height: 1.4;
}

/* Select para loci con muchas combinaciones (series alélicas) */
.select-locus {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: #fff;
  color: var(--texto);
  cursor: pointer;
  width: 100%;                /* mismo ancho que los grupos de botones → alineado */
}
.select-locus:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}
/* Desplegable aún sin elegir: texto atenuado (placeholder "— Elige —") */
.select-locus.sin-elegir {
  color: #8a8f98;
}
/* Texto neutro en la caja de fenotipo mientras falten opciones por elegir */
.feno-pendiente {
  color: #8a8f98;
  font-style: italic;
}

/* ---- Cajas de fenotipo de los padres (independientes, debajo) ---- */
.fenotipos-padres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 760px) {
  .fenotipos-padres { grid-template-columns: 1fr; }
}
.caja-fenotipo {
  border: 1px solid var(--macho-borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;
}
.caja-fenotipo[data-sexo="hembra"] { border-color: var(--hembra-borde); }
.caja-fenotipo-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--macho-txt);
  background: var(--macho-bg);
  border-bottom: 1px solid var(--macho-borde);
}
.caja-fenotipo[data-sexo="hembra"] .caja-fenotipo-cab {
  color: var(--hembra-txt);
  background: var(--hembra-bg);
  border-bottom-color: var(--hembra-borde);
}
.caja-fenotipo-cab .simbolo {
  width: 22px; height: 22px;
  font-size: 13px;
}
.caja-fenotipo[data-sexo="hembra"] .simbolo { color: var(--hembra-txt); }

/* ---- Resumen genotipo (texto del fenotipo dentro de la caja) ---- */
.resumen-genotipo {
  padding: 14px;
  font-size: 14px;
  color: var(--texto-suave);
  min-height: 44px;
  word-break: break-word;
}
.resumen-genotipo .etiqueta {
  display: none; /* ya lo indica la cabecera de la caja */
}

/* ---- Acciones ---- */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
/* Aviso discreto de selección incompleta: texto pequeño y gris, bajo los botones */
.aviso-seleccion {
  width: 100%;
  margin: 0;
  font-size: 13px;
  color: #6b7178;
}
.boton-principal,
.boton-secundario {
  font-family: inherit;
  font-size: 15px;
  padding: 15px 22px;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: all .15s ease;
  font-weight: 600;
}
/* Botón CALCULAR ancho, azul marino, mayúsculas (estilo canarios) */
.boton-principal {
  flex: 1;
  background: var(--boton);
  color: #fff;
  border: 1px solid var(--boton);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.boton-principal:hover { background: var(--boton-hover); border-color: var(--boton-hover); }
.boton-secundario {
  background: #fff;
  color: var(--texto-suave);
  border: 1px solid var(--borde-fuerte);
}
.boton-secundario:hover { background: var(--caja); }

/* ---- Resultados ---- */
.resultados h2 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
}
/* Conmutador Vista resumida / detallada */
.toggle-vista {
  display: flex;
  width: fit-content;
  margin: 0 0 18px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.toggle-vista button {
  appearance: none;
  border: none;
  border-right: 1px solid var(--borde);
  background: #fff;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--texto-suave);
  cursor: pointer;
  transition: all .12s ease;
}
.toggle-vista button:last-child { border-right: none; }
.toggle-vista button:hover { background: var(--caja); }
.toggle-vista button.activo { background: var(--acento); color: #fff; font-weight: 600; }
.grupo-sexo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) {
  .grupo-sexo { grid-template-columns: 1fr; }
}
.columna-sexo h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
}
.lista-descendencia {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fila-cria {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}
.porc {
  font-size: 18px;
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.cria-info .feno {
  font-weight: 500;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.45;
}
.cria-info .geno {
  margin-top: 4px;
  font-size: 11px;
  color: var(--texto-tenue);
  font-family: ui-monospace, "SF Mono", Monaco, Menlo, monospace;
  line-height: 1.4;
}

/* ---- Secciones del fenotipo ---- */
.feno-wrap { display: inline; }
.feno-visible {
  color: var(--texto);
  font-weight: 600;
}
.feno-enmascarado {
  color: var(--texto-tenue);
  font-weight: 400;
  font-size: 0.92em;
  font-style: italic;
}
.feno-oculto {
  color: #8b5e34;
  font-weight: 400;
  font-size: 0.92em;
}
.feno-splits {
  color: var(--texto-suave);
  font-weight: 400;
  font-size: 0.92em;
}
.lista-descendencia:empty::before {
  content: "Sin descendencia en este sexo.";
  color: var(--texto-tenue);
  font-size: 13px;
  font-style: italic;
}

.aviso {
  margin-top: 20px;
  padding: 12px 14px;
  background: #fffaf0;
  border-left: 3px solid #d69e2e;
  border-radius: var(--radio-sm);
  font-size: 13px;
  color: #744210;
  line-height: 1.5;
}

/* ---- Pie ---- */
.pie {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: var(--texto-tenue);
}
.pie p { margin: 0; }

/* Botón discreto hacia la guía (en la cabecera) */
.boton-guia {
  display: block;
  width: fit-content;
  margin: 8px auto 28px;
  padding: 9px 18px;
  background: var(--macho-bg);
  color: var(--macho-txt);
  border: 1px solid var(--macho-borde);
  border-radius: var(--radio-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.boton-guia:hover {
  background: #fff;
  border-color: var(--macho-txt);
}

/* ---- Estado vacío de mutaciones ---- */
.sin-mutaciones {
  font-size: 13px;
  color: var(--texto-tenue);
  font-style: italic;
  padding: 16px;
  margin: 16px 18px;
  text-align: center;
  background: var(--caja);
  border-radius: var(--radio-sm);
}

/* =========================================================================
   GUÍA DE USUARIO (guia.html)
   ========================================================================= */
.guia { max-width: 860px; }

.volver {
  display: inline-block;
  margin-top: 10px;
  color: var(--macho-txt);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.volver:hover { text-decoration: underline; }

.guia-seccion {
  padding: 22px 0;
  border-top: 1px solid var(--borde);
}
.guia-seccion:first-of-type { border-top: none; }
.guia-seccion h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fuente-titulo);
  font-size: 22px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 14px;
}
.guia-seccion h2 .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--boton);
  color: #fff;
  font-family: var(--fuente);
  font-size: 16px;
  font-weight: 700;
}
.guia-seccion h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 4px;
}
.guia-seccion p { margin: 0 0 12px; color: var(--texto-suave); }
.guia-seccion strong { color: var(--texto); }

/* Tip destacado */
.caja-tip {
  background: var(--macho-bg);
  border: 1px solid var(--macho-borde);
  border-radius: var(--radio-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--texto-suave);
  margin: 4px 0 0;
}
.caja-tip strong { color: var(--macho-txt); }

/* Pasos numerados */
.pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pasos > li {
  position: relative;
  padding-left: 44px;
  counter-increment: paso;
}
.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--caja);
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  color: var(--texto-suave);
}

.lista-simple { margin: 0 0 12px; padding-left: 20px; color: var(--texto-suave); }
.lista-simple li { margin-bottom: 6px; }

/* Ejemplo de resultado */
.ejemplo-resultado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}
.ejemplo-fila {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: 14px;
}
.ejemplo-porc {
  font-size: 18px;
  font-weight: 700;
  color: var(--boton);
  min-width: 48px;
}
.muted { color: var(--texto-tenue); font-size: 0.92em; }

.badge {
  display: inline-block;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 12px;
  font-style: italic;
  color: var(--texto-suave);
  margin-right: 4px;
}

/* Glosario (tablas) */
.glosario {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
}
.glosario th {
  text-align: left;
  padding: 8px 12px;
  background: var(--caja);
  border: 1px solid var(--borde);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}
.glosario td {
  padding: 10px 12px;
  border: 1px solid var(--borde);
  vertical-align: top;
  color: var(--texto-suave);
}
.glosario td:first-child { width: 90px; text-align: center; white-space: nowrap; }
.glosario td:last-child  { width: 130px; }
/* Tabla de abreviaturas: solo 2 columnas, sin ancho fijo en la última */
.glosario-abrev td:last-child { width: auto; }
.sim {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Monaco, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--boton);
  background: #fff;
  border: 1px solid var(--borde-fuerte);
  border-radius: 5px;
  padding: 2px 8px;
  margin: 1px;
}
.mono {
  font-family: ui-monospace, "SF Mono", Monaco, Menlo, monospace;
  font-size: 13px;
  color: var(--texto);
  background: var(--caja);
  border-radius: 4px;
  padding: 1px 6px;
}

/* Conceptos (lista de definiciones) */
.conceptos { margin: 0; }
.conceptos dt {
  font-weight: 700;
  color: var(--texto);
  margin-top: 14px;
  font-size: 15px;
}
.conceptos dt:first-child { margin-top: 0; }
.conceptos dd {
  margin: 4px 0 0;
  color: var(--texto-suave);
  font-size: 14px;
}

.aviso-guia { margin-top: 0; }

/* ===== Específico GATOS: cabecera de grupo + aviso de letal (Manx) ===== */
.grupo-cab{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texto-suave,#4a5568); background:var(--caja,#f6f6f4);
  padding:6px 10px; margin:16px 0 6px; border-radius:6px;
  border-left:3px solid var(--acento,#2c3e50);
}
.grupo-cab:first-child{ margin-top:0; }
.aviso-letal{ margin:0 0 18px; padding:12px 16px; background:#fff7ed;
  border:1px solid #f6c177; border-left:4px solid #e58e26; border-radius:6px; }
.aviso-letal p{ margin:0; font-size:13.5px; line-height:1.5; color:#7a4a12; }