/* Identidad de marca: ver Diseño/MANUAL DE MARCA.pdf (paleta de colores, pag. 10).
   Tipografia: se deja la original del sistema (Segoe UI/Calibri/Arial), a pedido de
   Christian -- Science Gothic (tipografia corporativa, pag. 11) quedo descartada. */

:root {
  /* Paleta de marca Innovati (HEX exactos del manual) */
  --color-marca-negro: #000000;
  --color-marca-verde: #00ffa9;
  --color-marca-turquesa: #03ddb4;
  --color-marca-gris: #d5d9dd;
  /* Variante oscura de la turquesa: la marca usa la turquesa clara como FONDO (con
     texto negro encima, como en el logo); para texto/links sobre blanco hace falta un
     tono mas oscuro para que el contraste sea legible (accesibilidad). */
  --color-marca-turquesa-texto: #017a63;

  --color-critico: #c0392b; --color-critico-bg: #fdecea;
  --color-alto: #d35400; --color-alto-bg: #fdf0e5;
  --color-atencion: #b7950b; --color-atencion-bg: #fdf6e3;
  --color-normal: #017a63; --color-normal-bg: #e3fbf5;
  --color-texto: #14171a; --color-texto-suave: #5c6b7a;
  --color-borde: #e1e6ea; --color-fondo: #f7f9fb;
}
* { box-sizing: border-box; }
body {
  font-family: Segoe UI, Calibri, Arial, sans-serif;
  color: var(--color-texto);
  background: var(--color-fondo);
  margin: 0;
  font-size: 14px;
}
a { color: var(--color-marca-turquesa-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

header.barra {
  background: var(--color-marca-negro); color: #fff;
  padding: 10px 26px; display: flex; align-items: center; justify-content: space-between;
}
header.barra .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
header.barra .marca img { height: 34px; width: auto; display: block; }
header.barra nav a { color: #cfd9e3; margin-left: 18px; font-size: 13px; }
header.barra nav a:hover { color: var(--color-marca-verde); text-decoration: none; }

main.contenido { max-width: 1100px; margin: 0 auto; padding: 24px; }

section.tarjeta {
  background: #fff; border: 1px solid var(--color-borde); border-radius: 10px;
  padding: 18px 22px; margin-bottom: 18px;
}
section.tarjeta h2 { margin-top: 0; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--color-borde); padding-bottom: 8px; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.badge.CRITICO  { color: var(--color-critico);  background: var(--color-critico-bg); }
.badge.ALTO     { color: var(--color-alto);     background: var(--color-alto-bg); }
.badge.ATENCION { color: var(--color-atencion); background: var(--color-atencion-bg); }
.badge.NORMAL   { color: var(--color-normal);   background: var(--color-normal-bg); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-borde); vertical-align: top; }
th { color: var(--color-texto-suave); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
tr:hover td { background: #fafbfc; }

.boton {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; border: none;
  background: linear-gradient(135deg, var(--color-marca-verde), var(--color-marca-turquesa));
  color: var(--color-marca-negro); font-size: 13px; font-weight: 700; cursor: pointer;
  line-height: 1; white-space: nowrap;
}
.boton:hover { filter: brightness(0.95); text-decoration: none; }
.boton.secundario { background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde); }
.boton span[aria-hidden] { font-size: 14px; line-height: 1; }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; color: var(--color-texto-suave); margin-bottom: 4px; }
.campo input, .campo select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 14px;
}

.vacio { color: var(--color-texto-suave); font-style: italic; }
.aviso { background: var(--color-atencion-bg); color: var(--color-atencion); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.error { background: var(--color-critico-bg); color: var(--color-critico); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.exito { background: var(--color-normal-bg); color: var(--color-normal); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }

.tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tarjeta-resumen { border: 1px solid var(--color-borde); border-radius: 8px; padding: 10px 12px; text-align: center; }
.tarjeta-resumen .nombre { font-size: 12px; color: var(--color-texto-suave); margin-bottom: 4px; }
.tarjeta-resumen .puntaje { font-size: 22px; font-weight: 700; }

.grid-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; margin-bottom: 10px; }
.grid-campos .campo-ancho { grid-column: 1 / -1; }
.campo-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.campo-check input { width: auto; }
fieldset.seccion { border: 1px solid var(--color-borde); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
fieldset.seccion legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--color-texto); }
textarea.campo-textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 14px; font-family: inherit; }