/* ==========================================================================
   Radios de esquina de iTaula: una sola escala para toda la web
   (ver GUIA_BORDER_RADIUS.md en la raíz). Se enlaza justo después de
   output.css, así reasigna las clases rounded-* de Tailwind y los CSS de
   cada página (que van después) pueden seguir afinando con var(--r-*).
   ========================================================================== */
:root {
    --r-xs: 4px;    /* insignias, contadores, casillas, miniaturas pequeñas */
    --r-sm: 6px;    /* botones pequeños (≤40 px), chips, selectores, filas */
    --r-md: 8px;    /* campos, botones grandes, tarjetas de producto, fotos */
    --r-lg: 10px;   /* tarjetas y bloques blancos, paneles */
    --r-xl: 12px;   /* ventanas, diálogos y la parte de arriba de las hojas */
    --r-full: 9999px; /* solo círculos (avatares, ✕ redonda, puntos) y barras de progreso */
}

/* ── Clases de Tailwind → escala ── */
.rounded-sm, .rounded { border-radius: var(--r-xs); }
.rounded-md, .rounded-lg { border-radius: var(--r-sm); }
.rounded-xl { border-radius: var(--r-md); }
.rounded-2xl { border-radius: var(--r-lg); }
.rounded-3xl { border-radius: var(--r-xl); }
.rounded-none { border-radius: 0; }
/* rounded-full con relleno lateral = etiqueta o píldora de texto, no un círculo */
.rounded-full[class*="px-"] { border-radius: var(--r-xs); }

.rounded-t, .rounded-t-sm { border-top-left-radius: var(--r-xs); border-top-right-radius: var(--r-xs); }
.rounded-t-md, .rounded-t-lg { border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); }
.rounded-t-xl { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.rounded-t-2xl { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.rounded-t-3xl { border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); }
.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-b, .rounded-b-sm { border-bottom-left-radius: var(--r-xs); border-bottom-right-radius: var(--r-xs); }
.rounded-b-md, .rounded-b-lg { border-bottom-left-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.rounded-b-xl { border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.rounded-b-2xl { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-l, .rounded-l-md, .rounded-l-lg { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.rounded-l-xl { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.rounded-r, .rounded-r-md, .rounded-r-lg { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.rounded-r-xl { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.rounded-tl-2xl { border-top-left-radius: var(--r-lg); } .rounded-tr-2xl { border-top-right-radius: var(--r-lg); }
.rounded-bl-2xl { border-bottom-left-radius: var(--r-lg); } .rounded-br-2xl { border-bottom-right-radius: var(--r-lg); }
.rounded-tl-3xl { border-top-left-radius: var(--r-xl); } .rounded-tr-3xl { border-top-right-radius: var(--r-xl); }
.rounded-bl-3xl { border-bottom-left-radius: var(--r-xl); } .rounded-br-3xl { border-bottom-right-radius: var(--r-xl); }
/* Las esquinas a 0 van al final para ganar a las de arriba (como en Tailwind) */
.rounded-tl-none { border-top-left-radius: 0; } .rounded-tr-none { border-top-right-radius: 0; }
.rounded-bl-none { border-bottom-left-radius: 0; } .rounded-br-none { border-bottom-right-radius: 0; }

@media (min-width: 640px) {
    .sm\:rounded-lg { border-radius: var(--r-sm); }
    .sm\:rounded-xl { border-radius: var(--r-md); }
    .sm\:rounded-2xl { border-radius: var(--r-lg); }
}
@media (min-width: 768px) {
    .md\:rounded-2xl { border-radius: var(--r-lg); }
    .md\:rounded-none { border-radius: 0; }
}
@media (min-width: 1024px) {
    .lg\:rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
}