/* Herramienta ENS - Hoja de estilos base */
* { box-sizing: border-box; }

:root {
  --color-bg: #f7f8fa;
  --color-card: #ffffff;
  --color-primary: #c60b1e; /* rojo-bandera */
  --color-primary-dark: #8b0815;
  --color-accent: #ffc400; /* amarillo-bandera */
  --color-text: #1a1a1a;
  --color-muted: #5f6b7a;
  --color-border: #d8dde3;
  --color-success: #2e7d32;
  --color-warn: #f57c00;
  --color-danger: #c62828;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
}

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

header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

header h1 { margin: 0; font-size: 1.5rem; }
header .subtitle { margin: .25rem 0 0; opacity: .9; font-size: .95rem; }
header a { color: white; text-decoration: underline; font-size: .85rem; }
.brand { max-width: 1100px; margin: 0 auto; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.intro {
  background: var(--color-card);
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.intro p { margin: 0 0 .75rem; }
.intro p:last-child { margin-bottom: 0; }

fieldset {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

legend {
  font-weight: 600;
  padding: 0 .5rem;
  color: var(--color-primary-dark);
}

label {
  display: block;
  margin: .5rem 0;
  font-size: .92rem;
}

input[type="text"], input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: inherit;
  margin-top: .25rem;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

button {
  background: var(--color-primary);
  color: white;
  border: 0;
  padding: .65rem 1.1rem;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: .5rem;
  margin-top: .25rem;
}

button:hover { background: var(--color-primary-dark); }
button:disabled { background: #aaa; cursor: not-allowed; }
button.secondary { background: var(--color-muted); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.card {
  background: var(--color-card);
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  border-color: var(--color-primary);
}

.card h2 {
  margin: 0 0 .5rem;
  color: var(--color-primary-dark);
  font-size: 1.1rem;
}

.card .cta {
  margin: .5rem 0 0;
  color: var(--color-primary);
  font-weight: 600;
}

.dimension {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.dimension h3 {
  margin: 0 0 .25rem;
  color: var(--color-primary-dark);
}

.dimension .definicion {
  font-size: .9rem;
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.pregunta {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem 0;
  border-top: 1px dashed var(--color-border);
}

.pregunta:first-of-type { border-top: 0; }

.pregunta input[type="radio"] { margin-top: .25rem; }

.pregunta label.radio {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  cursor: pointer;
}

.pregunta .texto { flex: 1; font-size: .92rem; }
.pregunta .impacto {
  font-size: .75rem;
  padding: .15rem .45rem;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.impacto.BAJO { background: #e8f5e9; color: var(--color-success); }
.impacto.MEDIO { background: #fff3e0; color: var(--color-warn); }
.impacto.ALTO { background: #ffebee; color: var(--color-danger); }

.resultado-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.resultado-card {
  background: var(--color-card);
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-align: center;
  box-shadow: var(--shadow);
}

.resultado-card h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--color-muted); }
.resultado-card .nivel { font-size: 1.4rem; font-weight: 700; margin: 0; }

.nivel.BAJO { color: var(--color-success); }
.nivel.MEDIO { color: var(--color-warn); }
.nivel.ALTO { color: var(--color-danger); }

.resultado-final {
  background: var(--color-card);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-primary);
  text-align: center;
  margin: 1rem 0;
}

.resultado-final .categoria-final {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: .5rem 0;
}

.categoria-final.BASICA { color: var(--color-success); }
.categoria-final.MEDIA { color: var(--color-warn); }
.categoria-final.ALTA { color: var(--color-danger); }

#medidas-container { margin: 1rem 0; }

.medida {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  box-shadow: var(--shadow);
}

.medida.organizativas { border-left-color: #1976d2; }
.medida.operacionales { border-left-color: #7b1fa2; }
.medida.proteccion { border-left-color: #388e3c; }

.medida h4 {
  margin: 0 0 .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.medida .codigo {
  font-family: monospace;
  font-size: .85rem;
  background: #eef2f7;
  padding: .1rem .4rem;
  border-radius: 3px;
}

.medida .estado select {
  width: auto;
  display: inline-block;
  margin-left: .5rem;
}

.medida .descripcion { font-size: .9rem; color: var(--color-muted); margin: .5rem 0; }
.medida .guia {
  font-size: .8rem;
  color: var(--color-muted);
}
.medida .guia a { color: var(--color-primary); }

.medida .nivel-implantacion {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.medida .nivel-implantacion input[type="range"] { flex: 1; }

#estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .5rem;
  margin: 1rem 0;
}

.stat-card {
  background: var(--color-card);
  padding: .75rem;
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.stat-card strong {
  display: block;
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}
.stat-card span { font-size: .8rem; color: var(--color-muted); }

#filtros {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-card);
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin: 1rem 0;
  box-shadow: var(--shadow);
}
#filtros label { flex: 1; min-width: 180px; margin: 0; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  background: var(--color-card);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  margin: 1rem 0;
}
.form-grid label { margin: 0; }

#vista-previa pre, #texto-justificacion, #soa-texto {
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  font-size: .85rem;
  line-height: 1.45;
}

.quickstart, .info {
  background: var(--color-card);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  box-shadow: var(--shadow);
}

.hero {
  max-width: 1100px;
  margin: 0 auto;
}

.hero h1 { font-size: 2.2rem; }
.hero .lead { font-size: 1.1rem; max-width: 700px; }

footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--color-muted);
  font-size: .85rem;
}

@media print {
  header, footer, .actions, #filtros, #config { display: none; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* PWA install prompt */
.pwa-install {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--primary);
  color: white;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  display: none;
  z-index: 1000;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  font-size: 0.9rem;
}
.pwa-install:hover { background: var(--primary-dark); }