/* public_satiq/css/form.css */
/* Formulario de carga de episodios. Prioridad: comodidad de carga. Paleta SATI-Q. */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#f4f5f7; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; color:#222; font-size:14px; }
.topbar { background:linear-gradient(135deg,#dd4442 0%,#C22E2B 100%); color:#fff; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.topbar-left { display:flex; align-items:baseline; gap:12px; }
.topbar-logo { display:flex; align-items:center; }
.topbar-logo img { height:38px; width:auto; background:#fff; border-radius:50%; padding:4px; }
.topbar-sub { font-size:0.9rem; opacity:0.9; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.centro-nombre { font-size:0.9rem; font-weight:600; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-salir { color:#fff; background:rgba(255,255,255,0.18); padding:6px 14px; border-radius:6px; text-decoration:none; font-size:0.85rem; transition:background 0.2s; }
.btn-salir:hover { background:rgba(255,255,255,0.30); }
.form-wrap { max-width:1000px; margin:24px auto; padding:0 16px; }
.bloque { background:#fff; border:1px solid #e3e5e8; border-radius:10px; margin-bottom:18px; overflow:hidden; }
.bloque-titulo { background:#faf2f2; color:#C22E2B; font-size:1.05rem; font-weight:600; padding:12px 18px; border-bottom:1px solid #f0dada; }
.bloque-cuerpo { padding:18px; }
.placeholder { color:#999; font-style:italic; font-size:0.9rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 18px; }
.campo { display:flex; flex-direction:column; }
.campo label { font-size:0.82rem; font-weight:600; color:#444; margin-bottom:5px; }
.campo input,.campo select { padding:9px 11px; font-size:0.95rem; border:1px solid #ccd0d5; border-radius:7px; background:#fff; outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
.campo input:focus,.campo select:focus { border-color:#dd4442; box-shadow:0 0 0 3px rgba(221,68,66,0.12); }
.campo .ayuda { font-size:0.75rem; color:#888; margin-top:4px; }
.form-acciones { display:flex; align-items:center; gap:16px; margin:8px 0 40px; }
.btn-guardar { background:linear-gradient(135deg,#dd4442 0%,#C22E2B 100%); color:#fff; border:none; padding:13px 32px; font-size:1rem; font-weight:600; border-radius:8px; cursor:pointer; transition:transform 0.15s,box-shadow 0.2s; box-shadow:0 4px 12px rgba(221,68,66,0.3); }
.btn-guardar:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 16px rgba(221,68,66,0.45); }
.btn-guardar:disabled { background:#c9ccd1; box-shadow:none; cursor:not-allowed; }
.nota-guardar { font-size:0.8rem; color:#888; }
/* 11/09/2026: .topbar-right va con wrap. Medido en un viewport de 371px, los tres botones
   de la barra (Gestion de cierres, Clientes de la API, Cerrar sesion) no entraban en una
   fila y se salian 10px, y eso alcanza para que TODA la pagina tenga scroll horizontal en
   el telefono. La tabla no era el problema: ya scrollea dentro de su caja. */
@media (max-width:600px) { .topbar { flex-direction:column; gap:8px; align-items:flex-start; } .topbar-right { flex-wrap:wrap; gap:8px; width:100%; } .centro-nombre { max-width:100%; } .grid { grid-template-columns:1fr; } }
.grupo { margin-bottom:22px; }
.grupo:last-child { margin-bottom:0; }
.grupo-titulo { font-size:0.9rem; font-weight:700; color:#555; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; padding-bottom:6px; border-bottom:1px dashed #e3e5e8; }
.req { color:#dd4442; }
.campo-switch { justify-content:flex-start; }
.switch { position:relative; display:inline-block; width:52px; height:28px; margin:2px 0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:#c9ccd1; border-radius:28px; transition:0.2s; }
.slider:before { content:''; position:absolute; height:22px; width:22px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; }
.switch input:checked + .slider { background:#dd4442; }
.switch input:checked + .slider:before { transform:translateX(24px); }
.campo input:disabled { background:#f0f1f3; cursor:not-allowed; }
.input-sufijo { position:relative; display:flex; align-items:center; }
.input-sufijo input { width:100%; padding-right:62px; }
.sufijo { position:absolute; right:1px; top:1px; bottom:1px; display:flex; align-items:center; padding:0 12px; color:#888; font-size:0.85rem; background:#f0f1f3; border-left:1px solid #ccd0d5; border-radius:0 6px 6px 0; pointer-events:none; min-width:54px; justify-content:center; }
.sufijo:empty { display:none; }
.campo input.campo-error,.campo select.campo-error { border-color:#dc3545; background:#fff6f6; }
.campo input.campo-error:focus,.campo select.campo-error:focus { box-shadow:0 0 0 3px rgba(220,53,69,0.15); }
.ayuda.ayuda-error { color:#dc3545; font-weight:600; }
.score-nombre { color:#C22E2B; font-weight:700; font-size:0.78rem; }
.calc-fila { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.btn-calc { background:#fff; color:#C22E2B; border:1.5px solid #dd4442; padding:9px 18px; font-size:0.9rem; font-weight:600; border-radius:7px; cursor:pointer; transition:background 0.2s,color 0.2s; }
.btn-calc:hover:not(:disabled) { background:#dd4442; color:#fff; }
.btn-calc:disabled { border-color:#c9ccd1; color:#aaa; cursor:not-allowed; }
.calc-nota { font-size:0.8rem; color:#888; }
.acordeon-calc { max-height:0; opacity:0; overflow:hidden; margin-top:0; padding:0 18px; background:#fafbfc; border:1px solid #e3e5e8; border-width:0 1px; border-radius:9px; transition:max-height 0.35s ease,opacity 0.25s ease,margin-top 0.35s ease,padding 0.35s ease,border-width 0.35s ease; }
.acordeon-calc.abierto { max-height:2000px; opacity:1; margin-top:16px; padding:18px; border-width:1px; }
.acordeon-titulo { font-size:1rem; font-weight:700; color:#C22E2B; margin-bottom:14px; }
.riesgo-grupo { margin-top:8px; }
.riesgo-opcion { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:8px; cursor:pointer; border:2px solid transparent; margin-bottom:8px; transition:border-color 0.2s,box-shadow 0.2s; }
.riesgo-opcion:hover { box-shadow:0 2px 8px rgba(0,0,0,0.10); }
.riesgo-opcion input[type=radio] { margin-top:3px; flex-shrink:0; width:18px; height:18px; accent-color:#dd4442; }
.riesgo-opcion.sin { background:#f8f9fa; border-color:#dee2e6; }
.riesgo-opcion.bajo { background:#d4edda; border-color:#c3e6cb; }
.riesgo-opcion.alto { background:#fff3cd; border-color:#ffeeba; }
.riesgo-opcion.muyalto { background:#f8d7da; border-color:#f5c6cb; }
.riesgo-opcion.selected { border-color:#dd4442 !important; box-shadow:0 0 0 2px rgba(221,68,66,0.25); }
.riesgo-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; display:inline-block; margin-bottom:4px; }
.badge-sin { background:#dee2e6; color:#495057; }
.badge-bajo { background:#28a745; color:#fff; }
.badge-alto { background:#ffc107; color:#333; }
.badge-muyalto { background:#dc3545; color:#fff; }
.riesgo-desc { font-size:12px; color:#555; line-height:1.4; }
.calc-aviso { background:#fff3cd; border:1px solid #ffc107; color:#856404; padding:8px 12px; border-radius:5px; margin:10px 0; font-size:13px; }
.calc-resultado { margin:12px 0; font-size:0.95rem; color:#222; }
.calc-acciones { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.btn-calc-accion { background:#dd4442; color:#fff; border:none; padding:10px 20px; font-size:0.9rem; font-weight:600; border-radius:7px; cursor:pointer; }
.btn-calc-accion:hover { background:#C22E2B; }
.btn-calc-usar { background:#fff; color:#28a745; border:1.5px solid #28a745; padding:10px 20px; font-size:0.9rem; font-weight:600; border-radius:7px; cursor:pointer; }
.btn-calc-usar:hover { background:#28a745; color:#fff; }
.ap-seccion { background:#fff; border:1px solid #e9ebee; border-radius:8px; padding:14px; margin-bottom:12px; }
.ap-seccion-titulo { font-size:0.78rem; font-weight:700; text-transform:uppercase; color:#C22E2B; letter-spacing:0.5px; margin-bottom:12px; }
.ayuda-inline { font-weight:400; font-size:0.78rem; color:#888; }
.campo-readonly { background:#eef0f2; color:#555; cursor:not-allowed; }
.calc-resultado:empty { display:none; }
.tiss-cols { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:768px){ .tiss-cols { grid-template-columns:1fr 1fr; } }
.tiss-grupo { border:1px solid #e3e5e8; border-radius:7px; padding:12px 14px; margin-bottom:0; }
.tiss-grupo legend { font-size:0.78rem; font-weight:700; color:#C22E2B; padding:0 6px; width:auto; }
.tiss-item { display:flex; align-items:flex-start; gap:9px; padding:5px 0; cursor:pointer; font-size:0.88rem; color:#333; }
.tiss-item input { margin-top:2px; flex-shrink:0; width:17px; height:17px; accent-color:#dd4442; cursor:pointer; }
.tiss-nota { display:block; font-size:0.74rem; color:#888; margin-top:6px; font-style:italic; }
.tiss-score-box { background:#faf2f2; border-radius:7px; padding:12px 16px; text-align:center; margin:16px 0; font-size:0.95rem; }
.tiss-score-box span { font-size:1.4rem; font-weight:700; color:#C22E2B; margin-left:8px; }
.tiss-lista-wrap { margin-top:18px; }
.tiss-lista-titulo { font-size:0.9rem; font-weight:700; color:#555; margin-bottom:10px; }
.tiss-tabla { width:100%; border-collapse:collapse; font-size:0.88rem; }
.tiss-tabla th { background:#faf2f2; color:#C22E2B; text-align:left; padding:8px 12px; border:1px solid #f0dada; font-size:0.8rem; }
.tiss-tabla td { padding:8px 12px; border:1px solid #e3e5e8; }
.tiss-vacio-txt { text-align:center; color:#999; font-style:italic; }
.tiss-btn-edit,.tiss-btn-del { border:none; padding:4px 10px; border-radius:5px; cursor:pointer; font-size:0.8rem; font-weight:600; }
.tiss-btn-edit { background:#fff3cd; color:#856404; margin-right:4px; }
.tiss-btn-del { background:#f8d7da; color:#842029; }
.tiss-resumen { display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.tiss-resumen > div { flex:1; min-width:100px; background:#f4f5f7; border-radius:8px; padding:10px 14px; text-align:center; }
.tiss-resumen-lbl { display:block; font-size:0.72rem; text-transform:uppercase; color:#888; letter-spacing:0.5px; margin-bottom:4px; }
.tiss-resumen-val { font-size:1.3rem; font-weight:700; color:#C22E2B; }
.ec-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:768px){ .ec-grid { grid-template-columns:1fr 1fr; } }
.ec-item { border:1px solid #e3e5e8; border-radius:8px; padding:12px 14px; background:#fff; }
.ec-bandera { display:flex; align-items:center; gap:12px; }
.ec-label { font-size:0.9rem; font-weight:600; color:#333; }
.ec-num { max-height:0; opacity:0; overflow:hidden; margin-top:0; padding-top:0; border-top:1px dashed #e3e5e8; border-top-width:0; transition:max-height 0.3s ease,opacity 0.25s ease,margin-top 0.3s ease,padding-top 0.3s ease,border-top-width 0.3s ease; }
.ec-num.abierto { max-height:160px; opacity:1; margin-top:12px; padding-top:12px; border-top-width:1px; }
.aviso-exito { display:flex; align-items:center; justify-content:space-between; gap:14px; background:#d4edda; border:1px solid #c3e6cb; color:#155724; padding:14px 18px; border-radius:9px; margin-bottom:18px; font-weight:600; }
.aviso-cerrar { background:none; border:none; color:#155724; font-size:1.3rem; line-height:1; cursor:pointer; padding:0 4px; opacity:0.7; transition:opacity 0.2s; }
.aviso-cerrar:hover { opacity:1; }
.aviso-errores { background:#f8d7da; border:1px solid #f5c6cb; color:#842029; padding:14px 18px; border-radius:9px; margin-bottom:18px; }
.aviso-errores ul { margin:8px 0 0; padding-left:22px; }
.aviso-errores li { margin:3px 0; font-size:0.9rem; }

.btn-nav { color:#fff; background:rgba(255,255,255,0.18); padding:6px 14px; border-radius:6px; text-decoration:none; font-size:0.85rem; transition:background 0.2s; }
.btn-nav:hover { background:rgba(255,255,255,0.30); }
.aviso-prueba { background:#fff3cd; border:1px solid #ffc107; color:#856404; padding:12px 18px; border-radius:9px; margin-bottom:18px; font-size:0.9rem; }
/* Pie unico con la version del sistema. La version sale del CHANGELOG, ver src/Pie.php */
.pie-satiq { margin:28px auto 10px; padding-top:14px; border-top:1px solid #e3e5e8; text-align:center; font-size:0.8rem; color:#888; }
.pie-satiq a { color:#C22E2B; text-decoration:none; font-weight:600; }
.pie-satiq a:hover { text-decoration:underline; }

/* 28/09/2026: LA BARRA ENVUELVE EN CUALQUIER ANCHO, no solo por debajo de 600px. Hasta hoy el
   wrap estaba solo en la consulta de 600, asi que al sumar el boton del panel de terapias los
   botones se desbordaban en las anchuras del medio, que son las de una notebook con la ventana
   a medio abrir. Envolver es mas barato que elegir que boton sacar. */
.topbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }