body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f5f5;
}

header {
  background: #003366;
  color: white;
  padding: 15px;
  text-align: center;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
}

.menu-btn {
  background: #0055aa;
  color: white;
  padding: 20px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
}

.menu-center {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px;
}

.hidden {
  display: none;
}

input, select {
  display: block;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  font-size: 1rem;
}


video {
  width: 90%;
  max-width: 400px;
  border: 2px solid #0055aa;
  border-radius: 8px;
}

canvas {
  display: none;
}

/* Cabecera */
.header-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 15px;
}

.header-plan .icono-header {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.header-plan h2 {
  font-size: 1.5rem;
  color: #333;
}

/* Botones principales */
.botones-plan {
  gap: 15px;
}

.menu-btn {
  background: #0055aa;
  color: white;
  padding: 15px 25px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-guardar {
  background: #003d7a;
  margin-top: 10px;
  width: 100%;
}

/* Formulario */
.form-container {
  background: #fafafa;
  padding: 15px;
  border-radius: 8px;
  margin: 15px;
}

.form-container label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: #444;
}

.form-container input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Listado de planes */
.listado-container {
  padding: 15px;
}

.plan-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

/* Filtros */
.filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.filtros label {
  font-weight: bold;
  color: #444;
}

.filtros input[type="date"] {
  padding: 8px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn-filtrar {
  background: #007b55;
}

/* Contenedor de tarjetas */
.planes-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Tarjeta de plan */
.plan-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
  padding: 12px 15px;
}

.plan-card h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: #003d7a;
}

.plan-card .horario {
  font-size: 0.9rem;
  color: #555;
}

.plan-card .detalle {
  font-size: 0.95rem;
  color: #333;
  margin-top: 5px;
}

.login-container {
  max-width: 300px;
  margin: 100px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
  text-align: center;
}

.login-container input {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.error {
  color: red;
  font-size: 0.9rem;
}
/* Marco único para cámara/preview */
.camera-box{
  width: min(520px, 92vw);
  aspect-ratio: 4 / 3;           /* mantiene proporción de foto */
  margin: 12px auto;
  border: 3px solid #2b66b8;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;               /* recorta desbordes */
}

/* Todo lo que vaya dentro debe ajustarse al marco */
#camera-container > video,
#camera-container > canvas,
#camera-container > img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* o "contain" si prefieres que no recorte */
  display: block;
}
.hidden{ display: none !important; } /* por si acaso */

:root{ --line:#e5e7eb; --ink:#111827; --muted:#6b7280; --brand:#2563eb; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial; color:var(--ink); background:#fafbff; }
.wrap{ width:min(1100px,96vw); margin:18px auto; }
h2{ margin:0 0 8px; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
label{ font-weight:600; font-size:14px; }
input, select, textarea{ padding:8px; border:1px solid var(--line); border-radius:10px; }
table{ width:100%; border-collapse: collapse; font-size:14px; }
th, td{ padding:10px; border-bottom:1px solid var(--line); vertical-align: top; }
th{ background:#f3f4f6; text-align:left; }
.muted{ color:var(--muted); }
.btn{ padding:9px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.ghost{ background:#f6f8fc; }
.right{ text-align:right; }
.grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
.sig-pad{ border:1px dashed var(--line); border-radius:10px; background:#fff; }
.badge{ background:#eef2ff; border:1px solid #c7d2fe; color:#1e3a8a; padding:6px 10px; border-radius:999px; font-size:12px; }

/* ——— Sustituye estas dos líneas antiguas ———
.checklist{margin-top:8px}
.checklist label{display:flex;align-items:center;gap:8px;margin:6px 0}
------------------------------------------------ */

/* Alinea las “píldoras” de índices con la lista */
#chipsIndices{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 4px;
}

/* Lista en columna, pegada a la izquierda */
#listaSoluciones{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-top:8px;
}

/* Cada fila: checkbox + texto juntos, a la izquierda */
#listaSoluciones label{
  display:grid;
  grid-template-columns: 22px 1fr; /* checkbox + texto */
  align-items:start;
  column-gap:10px;
  width:100%;
  margin:6px 0;
  text-align:left;
}

/* Por si algún estilo global desplazaba el texto */
#listaSoluciones label span{
  display:block;
  margin:0;
  text-align:left !important;
  float:none !important;
}

/* Ajuste fino del checkbox respecto al texto */
#listaSoluciones label input[type="checkbox"]{
  margin-top:3px;
}
.firma-wrap{
  border:1px solid #cbd5e1; border-radius:10px; background:#fff;
  height:180px; position:relative; overflow:hidden;
}
#firmaResponsable{ display:block; width:100%; height:100%; }
.firma-placeholder{
  position:absolute; left:12px; top:10px; color:#94a3b8; pointer-events:none; font-size:.9rem;
}