` fuera de los módulos; 2. su regla de posición es `#suc-sw{margin-left:auto}` —un ID— y nosotros emitíamos sólo la clase `suc-sw`, así que esa regla estaba en la hoja y no se aplicaba a nada; 3. para arreglar lo que 1 y 2 descolocaban escribí estas dos reglas, que pisan su `space-between`; 4. resultado: su botón se movía 417 px y el conmutador se le encimaba —el botón acababa en 991 y el conmutador empezaba en 879—. Con el conmutador en su casa y con su id, estas dos reglas sobran y además mentían. Su hoja vuelve a mandar. Lo pidió Edna: retiró la nota gemela del encabezado de Clientes por lo mismo y dejó ésta sin medir, para que la midiera yo antes de tocarla. */ /* Barra de controles de la agenda, a petición de Fernando (17 oct): el borde derecho de «Mes» alineado con el borde derecho de la tarjeta del calendario, «Servicios y horarios» en la columna de la derecha —donde antes estaban Día / Semana / Mes—, y el mismo espacio a los dos lados del selector de semana. Las dos columnas repiten el template de .grid-2-1 para que la alineación sea exacta y no a ojo. Es una desviación DELIBERADA de la maqueta de Edna. */ /* La alineación exacta sólo cabe cuando la columna del calendario mide más que los tres grupos juntos (~917 px): por debajo de ~1760 px de ventana, «Mes» se iba de línea y quedaba peor que antes. Ahí se mantiene la fila completa. */ .m3-controles-rejilla{display:flex;align-items:center;gap:var(--sp-3) var(--sp-4); flex-wrap:wrap} .m3-controles-rejilla .m3-controles-izq{display:contents} .m3-controles-rejilla .m3-controles-der{margin-left:var(--sp-4)} @media (min-width: 1760px){ .m3-controles-rejilla{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--hueco);align-items:center} .m3-controles-rejilla .m3-controles-izq{display:flex} .m3-controles-rejilla .m3-controles-der{margin-left:0} } .m3-controles-izq{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-4);flex-wrap:wrap;min-width:0} .m3-controles-der{display:flex;justify-content:flex-end;align-items:center;min-width:0} .m3-controles-izq .periodo-sw{margin-left:0} @media (max-width: 860px){ .m3-controles-rejilla{grid-template-columns:1fr} .m3-controles-der{justify-content:flex-start} } /* Barra de «volver al listado / editar» de la ficha. Es añadido nuestro: su maqueta navega con un modal que no está en lo que extraemos, así que la ficha necesita una salida visible. Se queda arriba del todo y discreta. */ .m1-perfil-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap; margin-bottom:var(--sp-3,12px)} /* ── correcciones que pidió Fernando tras revisar staging (18 oct) ──────── */ /* (a) Todo lo que se pulsa dice que se pulsa. Su hoja pone cursor:pointer en casi todo, pero no en .btn cuando es un ni en las flechas de la semana. */ .btn,[role="button"],.m3-semana-nav-flecha,.pf-tab,.pf-fila,.card-accion{cursor:pointer} .btn:disabled,[aria-disabled="true"]{cursor:not-allowed} /* RETIRADA LA REGLA (i), que era una cuenta mal hecha. Decía: .m1-lista-encabezado{justify-content:flex-start} .m1-lista-encabezado > :last-child:not(.modulo-header):not(.btn){margin-left:auto} «Su encabezado tiene tres hijos —su JS añade uno más— así que ahí el botón queda junto al título». Medido por Edna en su propia maqueta a 1440: el encabezado tiene DOS hijos —.modulo-header en 272→651 y el botón en 1242→1408— y el botón está pegado al borde DERECHO. La corrección lo movió a un sitio que su diseño nunca tuvo. Y la segunda línea excluía `.btn`, que es la clase exacta del botón que pretendía empujar: aunque la premisa hubiera sido buena, no hacía nada. La nota gemela del encabezado de la agenda la medí yo después, y era falsa igual: ver más abajo, donde estaban las dos reglas de .m3-encabezado. */ /* (c) El aire entre los dos botones del pie. Lo daba el margin-top de .sidebar-soporte cuando iba abajo; al subirlo, ese margen quedó separándolo del nombre y los dos botones se pegaron. Ahora lo pone el de abajo. */ .sidebar-soporte + .sidebar-salir{margin-top:var(--sp-4,16px)} /* (d) El resalte del renglón NO mueve el texto: el relleno horizontal es fijo —estaba en 0, por eso el fondo pegaba con las letras— y al pasar por encima sólo cambia el color. El rectángulo lleva el radio de la tarjeta en sus cuatro esquinas, puesto en la primera y la última CELDA (el no acepta radio de forma fiable). Y el borde de arriba se veía más delgado que los otros tres porque no era un borde del rectángulo: era el border-bottom del renglón de ARRIBA, que el fondo no tapa. Se apaga ese y el propio mientras dura el resalte, para que el contorno sea uno solo y del mismo grosor. */ .tabla-clicable tbody td:first-child{padding-left:10px} .tabla-clicable tbody td:last-child{padding-right:10px} .tabla-clicable tbody tr:hover td{border-bottom-color:transparent} .tabla-clicable tbody tr:has(+ tr:hover) td{border-bottom-color:transparent} /* (g) El contorno es UNO y redondo. El anillo global de hover se pinta con box-shadow sobre el , y un no acepta border-radius: por eso el rectángulo salía a escuadra aunque las celdas estuvieran redondeadas. Se apaga ese anillo para estas filas y se dibuja el contorno con sombras INTERIORES en las celdas, que sí siguen el radio de cada esquina. */ .tabla-clicable tbody tr:hover{box-shadow:none} .tabla-clicable tbody tr:hover td{ box-shadow:inset 0 1px 0 var(--anillo-fila,var(--acento)), inset 0 -1px 0 var(--anillo-fila,var(--acento))} .tabla-clicable tbody tr:hover td:first-child{ border-top-left-radius:12px;border-bottom-left-radius:12px; box-shadow:inset 0 1px 0 var(--anillo-fila,var(--acento)), inset 0 -1px 0 var(--anillo-fila,var(--acento)), inset 1px 0 0 var(--anillo-fila,var(--acento))} .tabla-clicable tbody tr:hover td:last-child{ border-top-right-radius:12px;border-bottom-right-radius:12px; box-shadow:inset 0 1px 0 var(--anillo-fila,var(--acento)), inset 0 -1px 0 var(--anillo-fila,var(--acento)), inset -1px 0 0 var(--anillo-fila,var(--acento))} /* (d-bis) El foco del buscador. Su input no tiene borde propio —el marco lo pone .buscador— así que el anillo genérico caía sobre un elemento sin forma y salía un rectángulo plano. Ahora el marco entero reacciona, con el mismo anillo de 3 px que usan los campos de los formularios. */ .buscador:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px var(--foco)} .buscador input:focus{outline:none;box-shadow:none} /* (d) Aire entre «Horarios» y «Editar», que salían pegados. */ .m3-cfg-acciones{display:flex;gap:8px;justify-content:flex-end;flex-wrap:nowrap} /* REGLA DE PROYECTO · una etiqueta nunca se ilumina al pasar el cursor. Su hoja global pinta un anillo sobre todo lo pulsable e incluye `label[for]` —técnicamente un sí es pulsable: enfoca su campo—. Pero visto desde la pantalla, el anillo promete una acción que no existe: se encendía al pasar por «SUCURSAL», por «Nombre completo» y por cada etiqueta de formulario, con el mismo aspecto que el control de abajo, y parecían dos cosas distintas que se pueden picar. Decisión de Fernando el 19 oct 2026, para todo el proyecto. Empezó siendo el parche estrecho `.m3-filtros label` y se encontró otra vez en «Alta de paciente»: un parche por pantalla no es una regla. La especificidad iguala a la suya, y esta hoja carga después. */ label:hover,label:focus,label[for]:hover,label[for]:focus, legend:hover,legend:focus{box-shadow:none} /* (h) El resalte del renglón respira y respeta el radio de su tarjeta. Las celdas venían con padding horizontal 0, así que el fondo del hover pegaba con el texto, y las esquinas salían a escuadra dentro de una tarjeta redondeada. Deliberado y a petición: su maqueta se comporta igual. */ /* (k) El anillo del hover de las pestañas se veía cortado: .pf-tabs lleva overflow-x:auto y recortaba los 2px del box-shadow en los bordes. Con un respiro interior el anillo cabe entero. */ .pf-tabs{padding:3px 3px 0;scrollbar-width:thin} .pf-tabs .pf-tab{margin-bottom:3px} /* ── Campo de fecha con calendario propio ───────────────────────────────── */ /* El abre el calendario del sistema operativo, que no se parece al resto y no hay CSS que lo cambie. Se sustituye el CALENDARIO, no el campo: el input real sigue ahí, fuera de la vista, para que el navegador valide y el formulario lo lea igual. */ .fecha-caja{position:relative} .fecha-real{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px; left:0;bottom:0} .fecha-txt{cursor:pointer} .fecha-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:268px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,12px); box-shadow:0 12px 32px rgba(0,0,0,.14);padding:10px} .fecha-cab{display:flex;align-items:center;justify-content:space-between;gap:8px; margin-bottom:6px} .fecha-mes{font-size:13px;font-weight:700;color:var(--ink);text-transform:capitalize} /* El título del calendario es pulsable en DOS mitades: el mes abre los doce meses, el año abre una rejilla de años. Llegar a 1985 con la flecha de mes son casi quinientos clics, y una fecha de nacimiento siempre está lejos. */ .fecha-titulo{display:flex;align-items:center;gap:6px;background:none;border:0; padding:3px 6px;border-radius:var(--r-sm,6px);cursor:pointer;font:inherit} .fecha-titulo:hover{background:var(--aviso-fondo)} .fecha-mes-n,.fecha-anio-n{font-size:13px;font-weight:700;color:var(--ink); padding:1px 4px;border-radius:5px;text-transform:capitalize} .fecha-mes-n:hover,.fecha-anio-n:hover{background:var(--acento);color:#fff} /* La rejilla de salto reusa la caja de la de días: se cambia el contenido, no el lugar, para que el salto no se sienta como otra pantalla. */ .fecha-salto{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px} .fecha-salto-op{min-height:34px;border:1px solid var(--line);border-radius:var(--r-sm,6px); background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer; text-transform:capitalize} .fecha-salto-op:hover{background:var(--aviso-fondo)} .fecha-salto-op.elegida{background:var(--acento);border-color:var(--acento);color:#fff} .fecha-nav{width:26px;height:26px;border-radius:50%;border:1px solid var(--line); background:var(--surface);color:var(--ink);cursor:pointer;line-height:1;font-size:15px} .fecha-nav:hover{background:var(--aviso-fondo)} /* EL CALENDARIO DE LA CASA LLEVA SU PROPIA REJILLA. Edna: «cuando le doy a elegir una fecha de nacimiento no aparece el calendario, sólo las iniciales de la semana». No era que no apareciera: se pintaba en UNA COLUMNA, así que las siete iniciales llenaban el alto visible y los 34 días seguían hacia abajo, fuera de la pantalla. La causa: `campoFecha` arma la rejilla como `

` y la que reparte en siete columnas es `.m3-mes` — que está definida SÓLO en `diseno/pmedic.css:960` y no existe ni en `ph.css` ni aquí. Medido en vivo: `display:block`, `grid-template-columns:none`, 41 hijos en fila. O sea que el control compartido de la casa dependía de una clase que define la maqueta de UNO de los dos negocios. En PMedic el calendario funciona y en Perritos House no, y lleva así desde que existe. Un control de la casa tiene que traer su propio acomodo: `.fecha-rejilla` es la clase que le pone la plataforma, y es la que debe mandar. */ .fecha-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px} .fecha-rejilla .m3-mes-dia,.fecha-dia{min-height:30px;padding:0;align-items:center; justify-content:center;cursor:pointer} .fecha-dia:hover{background:var(--aviso-fondo)} .fecha-rejilla .m3-mes-dia.vacia{cursor:default} .fecha-rejilla .m3-mes-dia.elegida{background:var(--acento);border-color:var(--acento)} .fecha-rejilla .m3-mes-dia.elegida .num{color:#fff} /* «Hoy» a la izquierda, «Confirmar» a la derecha: el que cierra el calendario es el que manda, y va donde se espera un botón primario. */ .fecha-pie{display:flex;justify-content:space-between;align-items:center; gap:8px;margin-top:8px} .fecha-ok{flex:0 0 auto} /* ── Ausencias del equipo ───────────────────────────────────────────────── */ .ausencia-alcance{border-top:1px solid var(--line);padding-top:var(--sp-4,16px); margin-top:var(--sp-2,8px)} .ausencia-titulo{font-size:14px;margin:var(--sp-5,20px) 0 var(--sp-2,8px)} .ausencia-pendientes{margin-top:8px;display:grid;gap:3px;font-size:12.5px} /* Varios servicios a la vez, con fichas que se quitan: un real que queda detrás de un desplegable propio, y cualquier campo que sólo exista para que el formulario y las pruebas lo lean. */ /* El control REAL que se queda detrás cuando sustituimos su apariencia: el que valida el formato. Invisible, sin recibir clics y sin ocupar lugar. Calificar por elemento no bastó: dentro de `.modal-caja` hay reglas de dos clases que le ganan a `select.campo-oculto`, y el control «escondido» volvía a medir 1440 px. Lo reportó Edna montando el formulario, y en su código no dependió de este ayudante: le puso además `hidden`. Tenía razón en no fiarse. Aquí va `!important`, que en esta hoja sólo se usa para `[hidden]` y por la misma razón: la única función de esto es DESAPARECER. Un ayudante de esconder que pierde una carrera de especificidad no es un ayudante, es una trampa. */ .campo-oculto,select.campo-oculto,input.campo-oculto,textarea.campo-oculto{ position:absolute !important;opacity:0 !important;pointer-events:none; width:1px !important;height:1px !important; margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%)} /* Las sugerencias del buscador cuelgan del campo. */ .busca-suelta{position:relative} /* (b) La capa de arriba. Un popover dentro de .modal-caja -que tiene overflow:auto- se recorta, empuja el contenido o se enreda con el pie sticky. Con position:fixed sale del modal y se coloca a mano. */ .flota{position:fixed;z-index:400;overflow:auto; box-shadow:0 14px 36px rgba(0,0,0,.18)} /* El contorno del renglón SE QUEDA: es el de las opciones de los desplegables el que sobraba. Fernando lo aclaró el 19 oct — en la tabla le gusta. */ /* (a) Las opciones de un desplegable no llevan contorno. Su regla global de hover pinta un anillo de 2 px a toda la lista de controles, y sobre una opción de ancho completo ese anillo se lee como dos rayas, arriba y abajo. Lo que señala la opción bajo el cursor es el fondo. */ .busca-lista .busca-op:hover,.busca-lista .busca-op:focus-visible, .ms-lista .busca-op:hover,.pfh-hora:hover{box-shadow:none} /* (b) Un desplegable mide cinco opciones y el resto se desplaza. Abierto a su altura natural, el de servicios llegaba hasta el borde de la pantalla y tapaba todo lo demás. Regla del proyecto desde el 19 oct: cinco, salvo que haya una razón escrita para otra cosa. */ .busca-lista,.ms-lista{max-height:calc(5 * 38px + 12px)} /* (c) El hueco del calendario tampoco recibe el anillo del hover. Apagué el fondo pero no la sombra, que es lo que de verdad se veía. */ .fecha-rejilla .m3-mes-dia.vacia,.fecha-rejilla .m3-mes-dia.vacia:hover{ box-shadow:none;pointer-events:none} /* (d) “Ausencias del equipo” y “Recordatorios” centran su texto. text-align no basta: .card-accion es inline-flex y el texto es un elemento de la caja. ACOTADA A PH EL 4-NOV-2026, Y SE LE ESCAPABA A LA MEDICIÓN. La escribí sin `[data-negocio]`, así que alcanzaba también a PMedic, donde su maqueta deja ese botón en `normal`. No salía roja porque `comparar-estilos.js` emparejaba por firma y se quedaba con UN `.card-accion` elegido por orden de documento; al emparejar por linaje apareció. Una regla de la casa escrita para una pantalla de un negocio no debería alcanzar al otro: eso es decidir el diseño ajeno desde la hoja compartida. */ [data-negocio="ph"] .m3-filtros-acciones .card-accion{justify-content:center} /* (e) Un hueco del calendario no es una fecha: no se ilumina ni invita a pulsarlo. Y los números van centrados en su caja. */ .fecha-rejilla .m3-mes-dia.vacia{background:none;border:0;cursor:default} .fecha-rejilla .m3-mes-dia.vacia:hover{background:none} .fecha-dia{display:flex;align-items:center;justify-content:center;text-align:center} /* Especificidad por encima de .m3-mes-dia .num, que en su hoja fija width:21px y align-self:flex-start para la vista de MES —donde el número va arriba a la izquierda de una celda alta—. En el calendario de elegir fecha la celda es un cuadrito y el número va en el centro. */ .fecha-rejilla .m3-mes-dia .num{width:auto;height:auto;margin:0;align-self:auto} /* (f) Panel de fecha y hora: calendario fijo a la izquierda, horarios que se desplazan a la derecha. Con los horarios debajo del formulario, elegir una hora obligaba a bajar y perder de vista la fecha. */ .pfh{display:grid;grid-template-columns:minmax(0,248px) minmax(0,1fr);gap:14px; border:1px solid var(--line);border-radius:var(--r-lg,12px);padding:12px; background:var(--surface)} .pfh-cal{min-width:0} .pfh-col{min-width:0;display:flex;flex-direction:column;max-height:290px} .pfh-titulo{font-size:12.5px;font-weight:700;color:var(--ink); text-transform:capitalize;padding-bottom:8px;border-bottom:1px solid var(--line); margin-bottom:8px;flex:none} .pfh-cuerpo{overflow-y:auto;display:grid;gap:6px;align-content:start;padding-right:4px} .pfh-hora{width:100%;padding:9px 10px;border-radius:var(--r-md,10px); border:1px solid var(--line);background:var(--surface);color:var(--ink); font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:center} .pfh-hora:hover:not(:disabled){border-color:var(--acento);background:var(--aviso-fondo)} .pfh-hora.elegida{background:var(--acento);border-color:var(--acento);color:#fff} /* Un horario tomado se ve, apagado. Si no se pintara, la rejilla saldría con huecos salteados y no se sabría si falta personal o ya está ocupado. */ /* Una opción apagada del desplegable se ve apagada. Mismos valores que .pfh-hora:disabled, que es la convención de esta hoja para lo que no se puede pulsar: hasta el 27 oct 2026 `.busca-op` era el único control de lista sin ella, y el desplegable enseñaba como pulsable lo que el