/* Estilos propios del panel: formularios, tablas de cola y estados. Se suman a
   generator/templates/styles.css, no lo reemplazan. */

.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; color: var(--azul-900); }
.campo .ayuda { font-size: 0.82rem; color: var(--texto-suave); margin-top: 4px; }
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="url"],
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
}
.campo textarea { resize: vertical; min-height: 72px; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul-500); outline-offset: 1px; }

.codigo-grande {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--azul-900);
  text-align: center;
  padding: 22px 10px;
  background: var(--azul-100);
  border-radius: var(--radio);
  margin: 20px 0;
}

.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge-estado.pendiente { background: #fdf3d8; color: #8a6300; }
.badge-estado.aprobada { background: #e0f0e8; color: #1f6b42; }
.badge-estado.publicada { background: var(--azul-100); color: var(--azul-700); }
.badge-estado.rechazada { background: #fbe4e4; color: #a3231f; }
.badge-estado.verificado { background: #e0f0e8; color: #1f6b42; }

table.tabla-cola { width: 100%; border-collapse: collapse; margin: 14px 0 26px; font-size: 0.9rem; }
table.tabla-cola th, table.tabla-cola td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.tabla-cola th { background: var(--fondo-suave); color: var(--azul-900); }
table.tabla-cola .valor-anterior { color: var(--texto-suave); text-decoration: line-through; }
table.tabla-cola .valor-nuevo { font-weight: 600; }
table.tabla-cola .acciones { display: flex; gap: 8px; }
table.tabla-cola .acciones button { cursor: pointer; }

.boton-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto);
  cursor: pointer;
}
.boton-mini.aprobar { border-color: #1f6b42; color: #1f6b42; }
.boton-mini.rechazar { border-color: #a3231f; color: #a3231f; }
.boton-mini:hover { background: var(--fondo-suave); }

form.form-login .campo { max-width: 320px; margin: 0 auto 18px; }

.panel-seccion { border-top: 1px solid var(--borde); padding-top: 24px; margin-top: 24px; }
.panel-seccion:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* Editor de horario por franjas (Etapa 2B) */
.horario-editor { margin-top: 12px; }
.horario-dia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.horario-dia:last-of-type { border-bottom: none; }
.horario-dia-nombre {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  min-width: 150px;
  color: var(--azul-900);
}
.horario-franjas { display: flex; flex-wrap: wrap; gap: 14px; }
.horario-franja { display: inline-flex; align-items: center; gap: 6px; }
.horario-franja input[type="time"] {
  padding: 6px 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
}
.horario-separador { color: var(--texto-suave); font-size: 0.85rem; }

/* Fotos del consultorio (Etapa 2B) */
.galeria-panel { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 16px; }
.foto-actual { width: 130px; text-align: center; }
.foto-actual img {
  width: 130px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  margin-bottom: 6px;
}
.foto-actual form { margin: 0; }
.form-subir-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }

pre.resultado-publicar {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}