/* ═══════════════════════════════════════════════════════════════════════════
FORMAS — la capa de redondeo del sitio
Por qué existe este archivo
---------------------------
El sitio corría con los valores de fábrica de Bootstrap 4 (4px el botón y el
input, 4,8px el modal, 3,2px el botón chico) y las tarjetas —`.block-content`,
`.clean-block`— con 0px, o sea completamente rectas. En la portada convivían
siete radios distintos: 0 · 3,2 · 4 · 4,8 · 10 · 16 · 999px. El módulo en vivo,
en cambio, ya corre una escala propia y coherente (6/10/16) documentada en
`resources/views/vivo/_estilos.blade.php`. El sitio y el módulo estaban en dos
épocas distintas y la costura se veía al pasar de /academias a /en-vivo.
Este archivo adopta EN EL SITIO LA MISMA ESCALA QUE EL MÓDULO YA USA, para que
haya un solo sistema en todo el producto.
NO se toca `bootstrap.min.css`: es un vendor minificado y cualquier edición se
pierde en la próxima actualización. Esta capa lo pisa por ORDEN DE CARGA con
selectores de la misma especificidad, que es la forma correcta.
─────────────────────────── LA REGLA ───────────────────────────
Es la misma que ya está escrita en el módulo, palabra por palabra, y no es
"lo importante va más redondo": EL RADIO CRECE CON LA SUPERFICIE, y un
contenedor nunca le presta su radio al contenido.
--forma-0 0px lo que va A SANGRE contra el borde de su contenedor, y
la fila de una lista continua: la celda de una tabla, la
franja de borde a borde, el `.jumbotron-fluid`, el
`.list-group-flush`. Es un valor ELEGIDO, no un olvido.
--forma-1 6px la pieza chica ANIDADA adentro de otra: el badge, el
casillero del checkbox, la barra de progreso, el globito
del tooltip. Va un escalón abajo del contenedor que la
envuelve, que es lo que hace que se lea adentro y no
encima.
Ojo: el criterio es estar ANIDADO, no medir poco. Una
regla por altura no se sostiene cuando la altura la
decide el ancho de la columna, que es lo que pasa con los
botones de acción de las tablas del panel.
--forma-2 10px EL CONTROL: botón, input, select, textarea, el label del
file, el addon del input group, el menú desplegable, la
miniatura, la solapa, el Select2 del panel. Es el valor
por omisión: ante la duda, éste.
--forma-3 16px EL BLOQUE DE PÁGINA que contiene a los de arriba: la
tarjeta `.block-content`, la `.clean-card`, el `.card`,
el `.panel` del admin, el modal, el aviso, el popover.
999px SÓLO EL ESTADO: `.badge-pill`, `.rounded-pill`. Que la
pastilla sea la única forma con radio máximo es lo que la
deja distinguirse de un badge común SIN usar color.
Dos consecuencias que son decisiones, no descuidos:
1. SE ELIMINAN LAS TALLAS DE RADIO. Bootstrap tiene `.btn-sm` en 3,2px y
`.btn-lg` en 4,8px. Acá `.btn-xs`, `.btn-sm`, `.btn` y `.btn-lg` comparten
los 10px del control, sin excepciones. Un sistema de formas tiene UN radio
de control; el tamaño lo dicen el alto y el padding, no la esquina.
2. EL INTERIOR DERIVA DEL CONTENEDOR. Bootstrap calcula el header de una
tarjeta como `calc(radio - 1px)` para descontar el borde. Si sólo se sube
el radio del contenedor y no el del header, aparece una cuña de fondo en
las esquinas de arriba. Por eso `--forma-3-interior`.
─────────────── LO QUE HACE QUE ESTO NO ROMPA NADA ───────────────
Bootstrap arma sus componentes AGRUPADOS —input group, btn group, card group,
accordion, paginador— poniendo en CERO las esquinas interiores con reglas
LONGHAND (`border-top-right-radius:0`) y selectores de especificidad alta
(0,3,0). Las reglas de acá son SHORTHAND sobre el elemento base (0,1,0), así
que las de Bootstrap siguen ganando y los grupos siguen unidos solos.
Eso se rompería de dos maneras, y las dos están evitadas a propósito:
· usando `!important` sobre `.btn` o `.form-control` — no se usa en ningún
control de este archivo;
· restableciendo acá las reglas de talla `.input-group-lg > …` (0,3,0), que
al ir después ganarían por orden y volverían a redondear el interior.
Por las dudas, y para que esto aguante a quien edite el archivo mañana sin
leer esto, al final está la GUARDA DE GRUPOS: las reglas de cierre de
Bootstrap repetidas textualmente, últimas de todas. Mientras ese bloque siga
siendo el último, ningún grupo se puede partir en dos.
─────────────── DÓNDE SE CARGA, Y POR QUÉ AHÍ ───────────────
ÚLTIMA DE TODAS, y en los dos layouts DESPUÉS del `@yield('styles')`. No es un
detalle: 106 vistas cargan su propio vendor dentro de ese yield (Select2,
DataTables, bootstrap-tagsinput, daterangepicker) y todos traen su 4px. Con la
hoja puesta antes del yield, medido, el Select2 del panel se quedaba en 4px al
lado de inputs de 10px — o sea que la costura no desaparecía, se mudaba adentro
del formulario. Los estilos propios de cada vista no se ven afectados porque
apuntan a clases propias, no a clases del framework.
En `layouts/admin/layout.blade.php` hay además una trampa: el `@csrf` que está
dentro del `` emite un ``, el parser cierra el head ahí mismo y
todos los `` de SmartAdmin terminan de verdad en el ``. Una hoja
puesta antes de ese `@csrf` queda en el head y PIERDE contra ellos.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--forma-0: 0;
--forma-1: 6px;
--forma-2: 10px;
--forma-3: 16px;
--forma-pastilla: 999px;
/* El interior de un bloque con borde de 1px: descuenta el borde para que la
curva de adentro sea concéntrica con la de afuera y no quede la cuña. */
--forma-3-interior: 15px;
--forma-2-interior: 9px;
}
/* ═══════════ --forma-2 · EL CONTROL ═══════════
Shorthand y sin !important, a propósito: así las reglas de cierre de grupo de
Bootstrap (más específicas) siguen ganando sobre las esquinas interiores. */
.btn,
.form-control,
.custom-select,
.custom-file,
.custom-file-input,
.custom-file-label,
.input-group-text,
.dropdown-menu,
.img-thumbnail,
.navbar-toggler,
.breadcrumb,
.nav-pills .nav-link {
border-radius: var(--forma-2);
}
/* Las tallas de Bootstrap traen su propio radio y hay que anularlo: el botón
chico y el grande son el MISMO control, con el mismo radio. */
.btn-lg,
.btn-group-lg > .btn,
.btn-sm,
.btn-group-sm > .btn,
.form-control-sm,
.form-control-lg {
border-radius: var(--forma-2);
}
/* EL `.btn-xs` VA CON EL RESTO DE LOS BOTONES, Y ACÁ ESTÁ POR QUÉ.
Hubo una excepción que lo bajaba un escalón, argumentada con que mide 21px de
alto. Medido después contra los datos de PRODUCCIÓN, en la misma página que se
citaba de evidencia, esos botones miden 37,6px: el texto envuelve a dos
líneas. A esa altura, el escalón chico lo dejaba en 6px al lado de un `.btn`
normal de 36px en 10px — dos botones de altura casi idéntica con radios
distintos, o sea justo la mezcla que esta capa vino a eliminar, y encima sobre
el botón más usado del panel.
Y la altura ni siquiera es estable: en la misma fila de noticias, "Editar" mide
20,8px y "Eliminar" 37,6px. Una regla que depende del alto no se puede colgar
de una clase cuya altura la decide el ancho de la columna. */
/* La solapa sólo redondea arriba: abajo se funde con el panel. */
.nav-tabs .nav-link {
border-top-left-radius: var(--forma-2);
border-top-right-radius: var(--forma-2);
}
/* El botón "Elegir" del input de archivo vive PEGADO al borde derecho del label,
así que sólo lleva las dos esquinas de ese lado. Bootstrap lo escribe en
shorthand con el 4px hardcodeado; si no se reescribe, queda un botón recto
adentro de un campo redondo. */
.custom-file-label::after {
border-radius: 0 var(--forma-2) var(--forma-2) 0;
}
/* El paginador es una lista continua: los del medio van rectos y sólo los dos
extremos se redondean. Esto además unifica los dos paneles — el admin
(SmartAdmin) redondeaba cada link por separado en 4px, el público los unía. */
.pagination .page-link,
.page-link {
border-radius: 0;
}
.page-item:first-child .page-link,
.pagination-lg .page-item:first-child .page-link,
.pagination-sm .page-item:first-child .page-link {
border-top-left-radius: var(--forma-2);
border-bottom-left-radius: var(--forma-2);
}
.page-item:last-child .page-link,
.pagination-lg .page-item:last-child .page-link,
.pagination-sm .page-item:last-child .page-link {
border-top-right-radius: var(--forma-2);
border-bottom-right-radius: var(--forma-2);
}
/* La galería de producto de la tienda y las miniaturas: media anidada dentro de
un bloque de 16px, un escalón abajo. */
.clean-block.clean-gallery img,
.sp-wrap,
.sp-loading {
border-radius: var(--forma-2);
}
/* El toast de toastr: flota suelto pero es del tamaño de un control ancho. */
#toast-container > div {
border-radius: var(--forma-2);
}
/* ═══════════ --forma-3 · EL BLOQUE DE PÁGINA ═══════════ */
.card,
.modal-content,
.alert,
.popover,
.jumbotron,
.list-group,
.toast,
.clean-card,
.clean-block .block-content,
.clean-block .content,
.panel {
border-radius: var(--forma-3);
}
/* `.clean-post` es el único `.block-content` con padding 0: la foto llega hasta
el borde, así que el bloque tiene que recortarla o las esquinas quedan
cuadradas por debajo de la curva. */
.clean-block.clean-post .block-content,
.clean-card {
overflow: hidden;
}
/* ── Los interiores, concéntricos con su contenedor ──
Bootstrap y SmartAdmin los tienen hardcodeados en calc(.25rem - 1px) y en 4px.
Sin esto, una tarjeta de 16px con un header de 3px abre una cuña de fondo en
las dos esquinas de arriba, que es exactamente el defecto que se ve. */
.card-header:first-child {
border-radius: var(--forma-3-interior) var(--forma-3-interior) 0 0;
}
.card-footer:last-child {
border-radius: 0 0 var(--forma-3-interior) var(--forma-3-interior);
}
.card > .list-group:first-child,
.card-img,
.card-img-top {
border-top-left-radius: var(--forma-3-interior);
border-top-right-radius: var(--forma-3-interior);
}
.card > .list-group:last-child,
.card-img,
.card-img-bottom {
border-bottom-right-radius: var(--forma-3-interior);
border-bottom-left-radius: var(--forma-3-interior);
}
.modal-header,
.popover-header {
border-top-left-radius: var(--forma-3-interior);
border-top-right-radius: var(--forma-3-interior);
}
.modal-footer {
border-bottom-right-radius: var(--forma-3-interior);
border-bottom-left-radius: var(--forma-3-interior);
}
.clean-card .image {
border-radius: var(--forma-3-interior) var(--forma-3-interior) 0 0;
}
/* El panel del admin (SmartAdmin) y sus dos mitades. */
.panel-hdr {
border-radius: var(--forma-3-interior) var(--forma-3-interior) 0 0;
}
.panel .panel-container,
.panel .panel-container .panel-content:only-child,
.panel .panel-container .panel-content:last-child {
border-radius: 0 0 var(--forma-3-interior) var(--forma-3-interior);
}
.panel-collapsed .panel-hdr {
border-radius: var(--forma-3-interior);
}
/* ═══════════ LOS WIDGETS DEL ADMIN ═══════════
El panel usa Select2 para casi todos sus desplegables, y Select2 trae su
propio 4px. Un Select2 de 4px al lado de un `.form-control` de 10px es la
costura más visible del admin, así que entra a la escala como el control que
es. Sus reglas de "abierto hacia arriba / hacia abajo" son más específicas
(0,4,0) y siguen ganando solas, que es lo que mantiene pegados el campo y su
menú desplegado. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--classic .select2-selection--single,
.select2-container--classic .select2-selection--multiple,
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
border-radius: var(--forma-2);
}
/* La flechita del Select2 clásico va pegada al borde derecho del campo. */
.select2-container--classic .select2-selection--single .select2-selection__arrow {
border-top-right-radius: var(--forma-2);
border-bottom-right-radius: var(--forma-2);
}
/* Cada valor elegido de un multiselect es una pieza chica anidada en el campo. */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
border-radius: var(--forma-1);
}
/* Los avisos flotantes de DataTables son bloques de página. */
div.dt-button-info,
div.dtr-modal div.dtr-modal-display {
border-radius: var(--forma-3);
}
/* ═══════════ --forma-1 · LA PIEZA CHICA ANIDADA ═══════════
Un escalón abajo del contenedor que la envuelve. */
.badge,
.progress,
.tooltip-inner,
.valid-tooltip,
.invalid-tooltip,
kbd,
.custom-checkbox .custom-control-label::before {
border-radius: var(--forma-1);
}
/* ═══════════ --forma-0 · LO QUE VA A SANGRE ═══════════
Elegido, no olvidado: redondear una franja de borde a borde abre una cuña de
fondo en las cuatro esquinas. La celda de una tabla y la fila de una lista
continua tampoco se redondean: lo hace el bloque que las contiene. */
.jumbotron-fluid,
.list-group-flush,
.panel.panel-fullscreen,
.panel.panel-fullscreen .panel-hdr,
.panel.panel-fullscreen .panel-container {
border-radius: 0;
}
/* ═══════════ 999px · SÓLO EL ESTADO ═══════════
La pastilla es la única forma con radio máximo del producto. Que sea la única
es lo que la deja distinguirse de un badge común sin recurrir al color. */
.badge-pill,
.rounded-pill {
border-radius: var(--forma-pastilla) !important;
}
/* ═══════════ LAS UTILIDADES `.rounded-*` ═══════════
Vienen con !important, así que ganarían sobre todo lo de arriba si se dejaran
en los valores de fábrica. Se remapean a la escala en vez de anularlas: donde
alguien escribió `.rounded` quiso "el radio normal", y ahora eso son 10px. */
.rounded-sm { border-radius: var(--forma-1) !important; }
.rounded { border-radius: var(--forma-2) !important; }
.rounded-lg { border-radius: var(--forma-3) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-top { border-top-left-radius: var(--forma-2) !important; border-top-right-radius: var(--forma-2) !important; }
.rounded-right { border-top-right-radius: var(--forma-2) !important; border-bottom-right-radius: var(--forma-2) !important; }
.rounded-bottom { border-bottom-right-radius: var(--forma-2) !important; border-bottom-left-radius: var(--forma-2) !important; }
.rounded-left { border-top-left-radius: var(--forma-2) !important; border-bottom-left-radius: var(--forma-2) !important; }
/* `.rounded` está sobrecargada en este sitio y no quiere decir siempre lo mismo:
de sus ~120 usos, unos 70 son fotos (`rounded img-fluid`) y unos 17 son cajas
con borde (`border rounded`) que son bloques de página —la tarjeta del login
es una de ellas: es un `