/* Primitivos de UI compartidos por el portal (OE2) y el panel de admin.
*
* Por que existe este archivo: cada pantalla de Figma que llegaba traia otra
* copia del mismo campo, del mismo pill, de la misma tabla clave-valor, y cada
* copia vivia en la hoja de su modulo. Un cambio de diseno ("todos los campos a
* 38px") obligaba a editar cinco archivos y siempre quedaba uno afuera. Aca vive
* UNA definicion por primitivo; las clases historicas se suman como selectores
* de la misma regla en vez de repetir la declaracion.
*
* Regla de oro: nada entra aca sin que salga su copia en el mismo commit. Un
* primitivo que no borra duplicacion es un archivo mas, no menos.
*
* Orden de carga: en el portal entra por sub_filter en el , o sea ANTES
* que entelai-oe2.css (que llega por CustomCssPath, asincrono). A igual
* especificidad gana el que carga ultimo, asi que cualquier copia que quede
* viva en oe2.css pisa a estos primitivos: por eso el borrado no es prolijidad,
* es parte del mecanismo. Por lo mismo todos los var() llevan fallback literal
* — hay un instante en el que los tokens del portal todavia no existen.
*/
/* Tokens que la maqueta V2 usa y solo estaban declarados en admin-portal.css
(esa hoja no puede heredar el :root del portal y mantiene los suyos). */
:root {
--ao-text-2: #E7EAF2; /* texto de valor en tablas clave-valor */
--ao-row-alt: rgba(26, 35, 47, 0.3); /* = --ao-dark-2 al 30% */
}
/* ── Pill de accion ────────────────────────────────────────────────────────
* Misma geometria y tipografia en portal y admin (Figma: boton 8px/24px, r40,
* Manrope Medium 16 en mayusculas). La variante accent es la primaria; el
* .ap-btn pelado del admin usa borde neutro y por eso queda fuera del grupo
* accent. Las flechas que Figma dibuja adentro de estos botones van omitidas
* por pedido explicito (ver el registro de desviaciones en CLAUDE.md).
* Alto fijo de 38px: Figma dibuja la pill con py-8 y el borde por dentro; en CSS
* el borde suma y, con line-height normal, Manrope 16 daba 40px (1058:618).
*
* FILTRAR de la barra de filtros (.ao-fm-apply) y APLICAR del calendario
* (.ao-cal-ok) eran copias sueltas: sin transicion, sin glow y con #041018
* hardcodeado. Entran al grupo. APLICAR conserva la escala chica del popup con una
* regla propia junto al calendario, mas abajo. */
.ao-pill,
.ao-upload-pill,
.eam-pill,
.ap-btn,
.ao-fm-apply,
.ao-cal-ok {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
box-sizing: border-box;
height: 38px;
padding: 0 24px;
background: transparent;
border: 1px solid var(--ao-border-strong, rgba(255, 255, 255, 0.2));
border-radius: 40px;
color: var(--ao-text, #E2E8F0);
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: normal;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: background .2s, color .2s, box-shadow .2s;
}
.ao-pill svg,
.ao-upload-pill svg,
.eam-pill svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* El hover neutro tiene que quedar aca arriba y no en admin-portal.css: pesa lo
mismo que el hover de la variante accent (0,2,0) y esa hoja carga despues, asi
que desde alla se comeria el relleno del boton primario. */
.ap-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
.ao-pill,
.ao-upload-pill,
.eam-pill,
.ap-btn-primary,
.ao-fm-apply,
.ao-cal-ok {
border-color: var(--ao-accent, #0DE4C4);
color: var(--ao-accent, #0DE4C4);
}
.ao-pill:hover, .ao-pill:focus-visible,
.ao-upload-pill:hover, .ao-upload-pill:focus-visible,
.eam-pill:hover, .eam-pill:focus-visible,
.ao-fm-apply:hover, .ao-fm-apply:focus-visible,
.ao-cal-ok:hover, .ao-cal-ok:focus-visible,
.ap-btn-primary:hover {
background: var(--ao-accent, #0DE4C4);
color: var(--ao-dark-1, #030D19);
box-shadow: 0 0 8px 0 var(--ao-accent, #0DE4C4);
outline: none;
}
/* Deshabilitado: estaba solo en admin-portal.css. Pesa (0,3,0), asi que le gana
al hover accent (0,2,0) sin depender del orden de carga. */
.ao-pill:disabled,
.ap-btn:disabled {
opacity: .45;
cursor: not-allowed;
}
.ao-pill:disabled:hover,
.ap-btn:disabled:hover {
background: transparent;
box-shadow: none;
}
.ao-pill:disabled:hover {
color: var(--ao-accent, #0DE4C4);
}
/* ── Link secundario ───────────────────────────────────────────────────────
* Cancelar, Cerrar, Refrescar, Volver a Mi PACS, Nueva regla: texto acento, sin
* caja, en mayusculas. El unico feedback es el subrayado, en hover y en foco de
* teclado. Eran trece copias del mismo bloque en seis hojas, y tres se habian
* quedado sin :hover (.eam-cancel, .ao-fm-close) o con otro (.eam-newrule, que
* usaba brightness).
*
* .ao-link-btn es el nombre canonico para UI nueva (el resto son las clases
* historicas de cada modulo, como en los demas primitivos de esta hoja).
*
* Escala base: 16px, padding 8px 0. Quien necesite otra la declara en su hoja,
* que carga despues: a igual especificidad y sin !important (.eu-err-close 13px,
* .eam-newrule 14px, .ao-cal-clear 12px).
*
* Los tres selectores con [id*=] van completos y no como clase: Bootstrap
* carga DESPUES de esta hoja y a igual especificidad le gana, asi que la unica
* forma de ganarle sin !important es pesar mas (0,3,0 contra su 0,1,0). Por lo
* mismo el estado :hover/:focus-visible repite background, color y box-shadow:
* .btn:hover de Bootstrap los repinta. .ao-cal-clear (LIMPIAR de todos los
* calendarios) entro por pedido del disenador, que lo tenia en gris: queda
* afuera solo .ap-btn-danger (variante peligro deliberada). */
.ao-link-btn,
.eu-cancelar,
.eu-err-close,
.oe-report-cancel-link,
.share-email-btn,
.ap-btn-link,
.ap-back,
.eam-cancel,
.eam-newrule,
.ao-fm-close,
.ao-cal-clear,
[id*="delete-modal"] .modal-footer .btn-secondary,
[id*="share-modal"] .modal-footer .btn-secondary,
[id*="anonymize-modal"] .modal-footer .btn-secondary {
background: none;
border: none;
padding: 8px 0;
color: var(--ao-accent, #0DE4C4);
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.ao-link-btn:hover, .ao-link-btn:focus-visible,
.eu-cancelar:hover, .eu-cancelar:focus-visible,
.eu-err-close:hover, .eu-err-close:focus-visible,
.oe-report-cancel-link:hover, .oe-report-cancel-link:focus-visible,
.share-email-btn:hover, .share-email-btn:focus-visible,
.ap-btn-link:hover, .ap-btn-link:focus-visible,
.ap-back:hover, .ap-back:focus-visible,
.eam-cancel:hover, .eam-cancel:focus-visible,
.eam-newrule:hover, .eam-newrule:focus-visible,
.ao-fm-close:hover, .ao-fm-close:focus-visible,
.ao-cal-clear:hover, .ao-cal-clear:focus-visible,
[id*="delete-modal"] .modal-footer .btn-secondary:hover,
[id*="delete-modal"] .modal-footer .btn-secondary:focus-visible,
[id*="share-modal"] .modal-footer .btn-secondary:hover,
[id*="share-modal"] .modal-footer .btn-secondary:focus-visible,
[id*="anonymize-modal"] .modal-footer .btn-secondary:hover,
[id*="anonymize-modal"] .modal-footer .btn-secondary:focus-visible {
background: none;
color: var(--ao-accent, #0DE4C4);
box-shadow: none;
text-decoration: underline;
}
/* ── Tabla clave-valor ─────────────────────────────────────────────────────
* Figma 1053:520 (modal Detalles del portal) y 938:637 (panel de admin) son la
* misma tabla: fondo Dark 1, filas pares tenidas, celdas 6/8, etiqueta blanca
* en negrita y valor en --ao-text-2. El admin ya la tenia como .ap-table.ap-kv;
* el selector historico se conserva para no tocar su HTML. */
.ao-kv,
.ap-table.ap-kv {
width: 100%;
border-collapse: collapse;
background: var(--ao-dark-1, #030D19);
}
.ao-kv td,
.ap-table.ap-kv td {
padding: 6px 8px;
text-align: left;
vertical-align: middle;
font-size: 14px;
line-height: normal;
}
.ao-kv tbody tr:nth-child(even),
.ap-table.ap-kv tbody tr:nth-child(even) {
background: var(--ao-row-alt, rgba(26, 35, 47, 0.3));
}
.ao-kv tbody tr:nth-child(odd),
.ap-table.ap-kv tbody tr:nth-child(odd) {
background: none;
}
.ao-kv td:first-child,
.ap-table.ap-kv td:first-child {
color: #fff;
font-weight: 700;
}
.ao-kv td:not(:first-child),
.ap-table.ap-kv td:not(:first-child) {
color: var(--ao-text-2, #E7EAF2);
font-weight: 400;
}
/* ── Boton de cierre de modal ──────────────────────────────────────────────
* 32x32 blanco, acento en hover. El glifo se centra por flex, no por
* line-height: el tamano de la caja tiene que ser independiente del tipo. */
:root { --ao-x-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E"); }
.ao-modal-close,
.oe-upload-close,
.ap-modal-close,
.ao-confirm-close,
.entelai-albums-header button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 32px;
height: 32px;
padding: 0;
background: none;
border: none;
color: #fff;
font-size: 0;
line-height: 1;
cursor: pointer;
transition: color .15s;
}
/* La x se dibuja como mascara (la misma que .btn-close en entelai-oe2.css) y no
como glifo "×": el glifo cambia de tamano con la tipografia del contexto, la
mascara mide lo mismo en todos los modales. El color es currentColor. */
.ao-modal-close::before,
.oe-upload-close::before,
.ap-modal-close::before,
.ao-confirm-close::before,
.entelai-albums-header button::before {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--ao-x-mask) center / 16px 16px no-repeat;
mask: var(--ao-x-mask) center / 16px 16px no-repeat;
}
.ao-modal-close:hover,
.oe-upload-close:hover,
.ap-modal-close:hover,
.ao-confirm-close:hover,
.entelai-albums-header button:hover {
color: var(--ao-accent, #0DE4C4);
}
.ao-modal-close:focus-visible,
.oe-upload-close:focus-visible,
.ap-modal-close:focus-visible,
.ao-confirm-close:focus-visible,
.entelai-albums-header button:focus-visible {
color: var(--ao-accent, #0DE4C4);
outline: 2px solid var(--ao-accent, #0DE4C4);
outline-offset: 2px;
}
/* ── Avatar de usuario ─────────────────────────────────────────────────────
* Figma 1053:376: circulo acento de 36px con las iniciales en Manrope Bold 16
* sobre Dark 1. Las iniciales llegan en data-initials (AOAuth.initials()).
* Reemplaza al icono de persona que portal y admin dibujaban cada uno. */
.ao-avatar::before {
content: attr(data-initials);
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ao-accent, #0DE4C4);
color: var(--ao-dark-1, #030D19);
font: 700 16px/1 'Manrope', sans-serif;
}
/* Nombre + plan a la izquierda del avatar (Figma 1134:424): 12px de separacion,
* texto a la derecha en blanco; nombre Manrope Bold 14, plan Medium 12/16. */
#menu-content > li.ao-avatar[data-bs-target] { gap: 12px; }
.ao-avatar-who { order: -1; text-align: right; color: #fff; font-family: 'Manrope', sans-serif; }
.ao-avatar-who p { margin: 0; white-space: nowrap; }
.ao-avatar-who p:first-child { font-weight: 700; font-size: 14px; line-height: normal; }
.ao-avatar-who p:last-child { font-weight: 500; font-size: 12px; line-height: 16px; }
/* ── Calendario ───────────────────────────────────────────────────────────
* Unico del producto: barra de filtros, reglas de carpeta inteligente,
* modales de Anonimizar y Editar, y Query/Retrieve del admin. El JS esta en
* entelai-calendar.js. Fondo y borde salen de la anotacion del disenador en
* Figma 1031:294 ("Fondo #1a232f, borde #FFFFFF al 20% de opacidad como los
* inputs") — ese nodo es una captura anotada, no una maqueta vectorial, asi
* que la geometria es la del componente que ya existia en la barra de filtros.
*/
.ao-cal-pop {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 1100;
width: 278px;
padding: 12px;
background: var(--ao-dark-2, #1A232F);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
/* Tipografia y corte de linea propios: sin ellos el calendario hereda los del
anfitrion (un modal de OE2 termina con system-ui de respaldo, el admin con otra, y
el reset de texto del modal de Anonimizar le mete word-break/overflow-wrap que
heredan todos sus nodos) y deja de ser el mismo en cada pantalla. */
.ao-cal {
display: flex; flex-direction: column; gap: 8px;
font-family: 'Manrope', 'Inter', sans-serif;
white-space: normal; word-break: normal; overflow-wrap: normal;
}
.ao-cal-head { display: flex; align-items: center; justify-content: space-between; }
.ao-cal-title { display: flex; align-items: center; gap: 6px; }
/* Mes y anio son botones: abren su propia grilla para saltar sin desfilar mes
a mes. Los ‹ › siguen estando y navegan la vista que este abierta. */
.ao-cal-title-btn {
background: none; border: none; padding: 2px 6px; border-radius: 6px;
color: #fff; font: 600 14px Manrope, sans-serif; text-transform: capitalize;
cursor: pointer;
}
.ao-cal-title-btn:hover { background: rgba(255, 255, 255, .08); }
.ao-cal-title-btn.open { color: var(--ao-accent, #0DE4C4); }
.ao-cal-nav {
background: none; border: none;
font-size: 20px; line-height: 1; cursor: pointer;
width: 26px; height: 26px; border-radius: 6px;
}
.ao-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* Meses y anios: 3 columnas en la misma caja de 278px. */
.ao-cal-grid-wide { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ao-cal-dow {
text-align: center; font: 500 11px Inter, sans-serif; color: #A6A7B0;
padding: 2px 0; text-transform: uppercase;
}
.ao-cal-day, .ao-cal-cell {
background: none; border: none; color: var(--ao-text, #E2E8F0);
height: 30px; border-radius: 6px; cursor: pointer;
font: 400 13px Inter, sans-serif;
}
.ao-cal-cell { height: 34px; text-transform: capitalize; }
.ao-cal-day:hover, .ao-cal-cell:hover { background: rgba(255, 255, 255, .08); }
.ao-cal-day.in { background: rgba(13, 228, 196, .18); }
.ao-cal-day.sel, .ao-cal-cell.sel {
background: var(--ao-accent, #0DE4C4); color: #041018; font-weight: 600;
}
.ao-cal-foot { display: flex; align-items: center; justify-content: space-between; }
/* LIMPIAR es el link secundario del primitivo (arriba) en la escala chica del popup:
12px y sin relleno horizontal, asi el texto queda a ras de la grilla de dias. El
padding vertical de 4px deja la fila del pie en el alto de APLICAR. Tiene que
quedar DEBAJO del primitivo, en este mismo archivo, para ganarle por orden. */
.ao-cal-clear { padding: 4px 0; font-size: 12px; }
/* APLICAR es la pill del primitivo (arriba) en la escala chica del popup: el alto
lo da el padding y no el height fijo de 38px. Tiene que quedar DEBAJO del
primitivo, en este mismo archivo, para ganarle por orden. */
.ao-cal-ok { height: auto; padding: 5px 16px; font-size: 12px; }
/* Un adoptado por AOCalendar.attach(): conserva el type
(su value sigue siendo ISO y el codigo que lo lee no se entera) pero pierde
el indicador del navegador, que es lo que abria el picker nativo. El icono
que queda es el nuestro, pintado de fondo. */
.ao-cal-field { position: relative; display: inline-flex; align-items: center; }
.ao-cal-field > input[type="date"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.30775 21.5C4.80258 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V6.30775C3.5 5.80258 3.675 5.375 4.025 5.025C4.375 4.675 4.80258 4.5 5.30775 4.5H6.69225V3.15375C6.69225 2.93458 6.76567 2.75158 6.9125 2.60475C7.05933 2.45808 7.24233 2.38475 7.4615 2.38475C7.68083 2.38475 7.86383 2.45808 8.0105 2.60475C8.15733 2.75158 8.23075 2.93458 8.23075 3.15375V4.5H15.8077V3.13475C15.8077 2.92192 15.8795 2.74367 16.023 2.6C16.1667 2.4565 16.3449 2.38475 16.5577 2.38475C16.7706 2.38475 16.9487 2.4565 17.0922 2.6C17.2359 2.74367 17.3077 2.92192 17.3077 3.13475V4.5H18.6923C19.1974 4.5 19.625 4.675 19.975 5.025C20.325 5.375 20.5 5.80258 20.5 6.30775V19.6923C20.5 20.1974 20.325 20.625 19.975 20.975C19.625 21.325 19.1974 21.5 18.6923 21.5H5.30775ZM5.30775 20H18.6923C18.7693 20 18.8398 19.9679 18.9038 19.9038C18.9679 19.8398 19 19.7693 19 19.6923V10.3077H5V19.6923C5 19.7693 5.03208 19.8398 5.09625 19.9038C5.16025 19.9679 5.23075 20 5.30775 20ZM5 8.80775H19V6.30775C19 6.23075 18.9679 6.16025 18.9038 6.09625C18.8398 6.03208 18.7693 6 18.6923 6H5.30775C5.23075 6 5.16025 6.03208 5.09625 6.09625C5.03208 6.16025 5 6.23075 5 6.30775V8.80775Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px 20px;
padding-right: 38px;
cursor: pointer;
}
.ao-cal-field > input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
/* Misma regla de hover que el chevron de los selects. Aca el color viaja DENTRO
del data-URI (currentColor no resuelve en background-image), asi que la unica
forma es repetir el icono con el fill en acento. */
.ao-cal-field > input[type="date"]:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.30775 21.5C4.80258 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V6.30775C3.5 5.80258 3.675 5.375 4.025 5.025C4.375 4.675 4.80258 4.5 5.30775 4.5H6.69225V3.15375C6.69225 2.93458 6.76567 2.75158 6.9125 2.60475C7.05933 2.45808 7.24233 2.38475 7.4615 2.38475C7.68083 2.38475 7.86383 2.45808 8.0105 2.60475C8.15733 2.75158 8.23075 2.93458 8.23075 3.15375V4.5H15.8077V3.13475C15.8077 2.92192 15.8795 2.74367 16.023 2.6C16.1667 2.4565 16.3449 2.38475 16.5577 2.38475C16.7706 2.38475 16.9487 2.4565 17.0922 2.6C17.2359 2.74367 17.3077 2.92192 17.3077 3.13475V4.5H18.6923C19.1974 4.5 19.625 4.675 19.975 5.025C20.325 5.375 20.5 5.80258 20.5 6.30775V19.6923C20.5 20.1974 20.325 20.625 19.975 20.975C19.625 21.325 19.1974 21.5 18.6923 21.5H5.30775ZM5.30775 20H18.6923C18.7693 20 18.8398 19.9679 18.9038 19.9038C18.9679 19.8398 19 19.7693 19 19.6923V10.3077H5V19.6923C5 19.7693 5.03208 19.8398 5.09625 19.9038C5.16025 19.9679 5.23075 20 5.30775 20ZM5 8.80775H19V6.30775C19 6.23075 18.9679 6.16025 18.9038 6.09625C18.8398 6.03208 18.7693 6 18.6923 6H5.30775C5.23075 6 5.16025 6.03208 5.09625 6.09625C5.03208 6.16025 5 6.23075 5 6.30775V8.80775Z' fill='%230DE4C4'/%3E%3C/svg%3E");
}
/* ── Campo de formulario ───────────────────────────────────────────────────
* "Todos los campos tienen que tener 38px de alto" y "el focus de los inputs
* debe ser en el verde #0DE4C4" (anotaciones del disenador en Figma 1033:298,
* que es una captura, no una maqueta vectorial).
*
* Habia ocho definiciones de campo repartidas en cuatro hojas, con tres altos
* distintos: 32px en el drawer de carpetas y en la barra de filtros, 38px en
* los modales del portal, y ninguno declarado en el admin ni en el
* vue-datepicker (que ya no existe), que terminaban en ~40 y ~41.5px segun el padding.
*
* Lo que se unifica es la caja y el foco. Fondo y radio se dejan donde estan:
* la barra de filtros va sobre Dark 1 y por eso usa Dark 2, y el admin usa r20
* en vez de r64. Son decisiones, no drift, y cada hoja carga despues de esta.
* El textarea del admin queda afuera a proposito: no es un campo de una linea. */
.ao-ctl,
.eam-input,
.eam-rule-ctl,
.ao-ff,
.share-email-input,
.ap-modal input:not([type="checkbox"]):not([type="radio"]),
.ap-toolbar input {
box-sizing: border-box;
height: 38px;
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 14px;
}
.ao-ctl:focus,
.eam-input:focus,
.eam-rule-ctl:focus,
.ao-ff:focus,
.share-email-input:focus,
.ap-modal input:not([type="checkbox"]):not([type="radio"]):focus,
.ap-toolbar input:focus {
outline: none;
border-color: var(--ao-accent, #0DE4C4);
}
/* ── Placeholder ───────────────────────────────────────────────────────────
* Gris de Figma 1058:619. Estaba repetido en el buscador y el modal de filtros
* del portal y en el modal de compartir. */
.ao-search-input::placeholder,
.ao-ff::placeholder,
.share-email-input::placeholder,
.ap-toolbar input::placeholder {
color: var(--ao-muted, #A6A7B0);
opacity: 1;
}
/* ── Checkbox ──────────────────────────────────────────────────────────────
* Figma 1065:833 es un rectangulo de 16x16 — el mismo control que el panel de
* admin ya tenia. No hay diseno nuevo: la regla se muda aca y alcanza tambien
* al filtro de Estado del reporte, a las reglas de carpeta inteligente y al
* selector de columnas, que hasta ahora usaban el checkbox nativo.
*
* Alcanza tambien a los cuatro radios de "Editar rol": el disenador los quiere
* cuadrados como el resto. Siguen siendo , o sea seleccion
* unica — lo que cambia es la caja, no el comportamiento.
* El tilde es el `check` de Material Symbols en Dark 1 (#030D19, Figma
* 1061:766), como background-image, porque el tilde nativo no se puede
* recolorear. */
.ao-check,
.ap-modal .ap-check input[type="checkbox"],
.ap-modal .ap-check input[type="radio"],
.ao-ms-row input[type="checkbox"],
.eai-cols-popover-row input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
flex: none;
width: 16px; height: 16px; padding: 0; margin: 0;
background: var(--ao-dark-1, #030D19);
border: 1px solid rgba(166, 167, 176, 0.2);
border-radius: 2.5px;
cursor: pointer;
}
.ao-check:checked,
.ap-modal .ap-check input[type="checkbox"]:checked,
.ap-modal .ap-check input[type="radio"]:checked,
.ao-ms-row input[type="checkbox"]:checked,
.eai-cols-popover-row input[type="checkbox"]:checked {
background: var(--ao-accent, #0DE4C4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M7.16367 13.4997L2.88867 9.22471L3.95742 8.15596L7.16367 11.3622L14.0449 4.48096L15.1137 5.54971L7.16367 13.4997Z' fill='%23030D19'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
/* El :focus de los campos solo mueve el border-color, invisible sobre el acento
del estado marcado. */
.ao-check:focus-visible,
.ap-modal .ap-check input[type="checkbox"]:focus-visible,
.ap-modal .ap-check input[type="radio"]:focus-visible,
.ao-ms-row input[type="checkbox"]:focus-visible,
.eai-cols-popover-row input[type="checkbox"]:focus-visible {
outline: 2px solid var(--ao-accent, #0DE4C4);
outline-offset: 2px;
}
/* ── Toast ──────────────────────────────────────────────────────────────────
* Piel unica del tooltip de hover (AOUI.hoverToast) y del aviso inferior
* (AOUI.toast). La posicion la pone entelai-ui.js; aca van solo los colores, el
* borde y el tipo. Los nombres de clase son contrato de report-editor.spec.ts y
* report-pill-tooltip.spec.ts: no renombrar. */
.entelai-qr-toast {
background: var(--ao-dark-2, #1A232F);
color: var(--ao-text, #E2E8F0);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 10px 18px;
z-index: 2147483647;
font-size: 13px;
}
/* ── Icono de accion ────────────────────────────────────────────────────────
* Regla unica del producto (usuario, 2026-09-19): blanco de base; en hover la
* UNICA accion es pintar el acento y mostrar el tooltip si lo tiene. Sin
* recuadro, sin sombra, sin filtro. Reemplaza cuatro hovers distintos.
* Quedan afuera: los que pelean contra Bootstrap (.series-button-group
* .btn-icon, .btn-clipboard) necesitan !important y viven en entelai-oe2.css,
* invertidos a mano. Las flechas del calendario eran la excepcion (acento de
* base, hover por recuadro) y dejaron de serlo por pedido del usuario
* (2026-09-22): entran aca, sin recuadro. */
.ao-icon-btn, .ap-icon-btn, .ao-row-action, .esb-act, .esb-close, .eam-act, .eam-rule-del,
.eai-share-copy-icon, .ao-cal-nav {
color: #FFFFFF;
}
.ao-icon-btn:hover, .ap-icon-btn:hover, .ao-row-action:hover, .esb-act:hover, .esb-close:hover,
.eam-act:hover, .eam-rule-del:hover, .eai-share-copy-icon:hover,
.ao-icon-btn:focus-visible, .ap-icon-btn:focus-visible, .ao-row-action:focus-visible, .esb-act:focus-visible,
.esb-close:focus-visible, .eam-act:focus-visible, .eam-rule-del:focus-visible,
.eai-share-copy-icon:focus-visible, .ao-cal-nav:hover, .ao-cal-nav:focus-visible {
color: var(--ao-accent, #0DE4C4);
}
/* ── Dropdown ──────────────────────────────────────────────────────────────
* El panel de "Estado del reporte" de la barra de filtros es el dropdown de
* todo el producto (AOUI.select, en entelai-ui.js). Vivia en
* entelai-study-search.css, y el editor de reglas de carpeta lo reimplementaba
* aparte.
*
* Al mudarse a esta hoja, que carga ANTES que la de cada modulo, deja de ganar
* por orden: .ao-ff (study-search) y .eam-rule-ctl (albums) tambien declaran
* padding y, a igual especificidad, le ganarian al padding-right del campo y
* correrian el chevron 5px. Por eso el campo va como .ao-ms > .ao-ff-select (mas
* especifico) y no como .ao-ff-select a secas: no depende del orden de carga.
* Las filas con checkbox usan el primitivo de Checkbox, mas abajo. */
.ao-ms { position: relative; width: 100%; }
.ao-ms > .ao-ff-select, .ao-ms > .ao-ff-date { display: flex; align-items: center; cursor: pointer; padding-right: 10px; }
.ao-ms-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px 'Manrope', 'Inter', sans-serif; }
.ao-ms-empty .ao-ms-label { color: #A6A7B0; }
.ao-ms-chev {
flex: 0 0 auto; width: 16px; height: 16px; margin-left: 8px; background-color: #fff;
-webkit-mask: center/16px no-repeat; mask: center/16px no-repeat;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ao-ms-cal {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Regla general de iconos del portal (#FFFFFF en reposo, #0DE4C4 en hover)
aplicada al chevron y al icono de calendario que viven DENTRO del campo.
El hover se cuelga del campo, no del icono de 16px: el puntero apunta al
control entero, que es quien lleva cursor:pointer. Va a (0,3,0) a proposito,
para pintar tambien el chevron atenuado del select de "Estudios por pagina"
(.eai-pagination-size-select, (0,2,0) en una hoja que carga despues). */
.ao-ms > .ao-ff-select:hover .ao-ms-chev,
.ao-ms > .ao-ff-date:hover .ao-ms-chev {
background-color: var(--ao-accent, #0DE4C4);
}
.ao-ms-chev { transition: background-color .12s ease; }
/* popovers (multi-select + calendar) */
.ao-ms-pop {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 5;
background: var(--ao-dark-2, #1A232F); border: 1px solid rgba(255,255,255,.2);
border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ao-ms-pop { padding: 6px; max-height: 220px; overflow-y: auto; }
.ao-ms-pop.ao-ms-up { top: auto; bottom: calc(100% + 4px); }
/* AOUI.select con fit: la opcion mas larga viaja en data-sizer y este pseudo la
reserva, sin mostrarla, para que el campo mida lo mismo elija lo que elija (un