/*
Cambiar valores globales del fondo y color de la tabla
*/
section .post > div table{
color: var(--body-color);
background: var(--body-fondo);
}





/*
*ESTILOS PARA SUMAS VERTICALES
*/
table.sumas-verticales{
letter-spacing: 5px; 
font-size: 1.3em; 
display: block;  
padding: 1em;  
overflow: auto; 
border-radius: 8px;
}
table.sumas-verticales th{
text-align: right;
}
table.sumas-verticales th.decimales{
text-align: left;
}
table.sumas-verticales b{
padding: 0em 0.25em;
}
table.sumas-verticales .total{
border-top: 2px solid; 
color: var(--negro-contraste);
}





/*
*ESTILOS PARA RESTAS VERTICALES
*/
table.restas-verticales{
letter-spacing: 5px; 
font-size: 1.3em; 
display: block;  
padding: 1em;  
overflow: auto; 
border-radius: 8px;
}
table.restas-verticales th{
text-align: right;
}
table.restas-verticales b{
padding: 0em 0.5em;
}
table.restas-verticales .total{
border-top: 2px solid; 
color: var(--negro-contraste);
}




/*
*ESTILOS PARA MULTIPLICACIONES VERTICALES
*/
table.multiplicaciones-verticales{
letter-spacing: 5px; 
text-align: right; 
font-size: 1.3em; 
display: block;  
padding: 1em;  
overflow: auto; 
border-radius: 8px;
}
table.multiplicaciones-verticales .borde-bottom{
border-bottom: 2px solid var(--negro-contraste);
}
table.multiplicaciones-verticales .total{
border-top: 2px solid; 
color: var(--negro-contraste);
}



/*
==================================================================
== CSS Optimizado para Calculadora de Divisiones v3.11+
== Versión 2.0 (Corrección de alineación)
==================================================================
*/

/* Estilos base (sin cambios) */
.divisiones-largas-mx, .divisiones-largas-es {
font-family: 'Courier New', monospace;
font-size: 1.25em;
min-width: max-content;
margin: 1em 0;
letter-spacing: 2px;
}
.divisiones-largas-mx td, .divisiones-largas-es td {
padding: 1px 4px;
vertical-align: top;
}
.tabla label {
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid var(--negro-contraste);
font-family: Arial, sans-serif;
font-size: 0.9em;
color: var(--negro-contraste);
margin-bottom: 3em;
display: block;
width: max-content;
}
.tabla input[type="checkbox"] {
display: none;
}

/* --- Formato México (MX) --- */
.divisiones-largas-mx {
margin-left: auto;
margin-right: 0;
}
/* --- CAMBIO: Se eliminó text-align: right de la regla general de <td> --- */
.divisiones-largas-mx td {
padding: 2px 5px;
}
/* --- CAMBIO: Se especifica la alineación solo para los elementos que la necesitan --- */
.divisiones-largas-mx .dividendo,
.divisiones-largas-mx .cociente,
.divisiones-largas-mx .divisor {
text-align: right;
}
/* --- CAMBIO: Se asegura que las filas del procedimiento estén alineadas a la izquierda --- */
/* (tr:nth-child(n+3)) selecciona la 3ra fila y todas las siguientes */
.divisiones-largas-mx tr:nth-child(n+3) > td {
text-align: left;
}
.divisiones-largas-mx .resta {
border-bottom: 1px solid var(--skin-glass-color);
color: var(--negro-contraste);
font-weight: bold;
}
/* Reglas de la galera (sin cambios) */
.divisiones-largas-mx .dividendo {
border-left: 2px solid var(--skin-glass-color);
border-top: 2px solid var(--skin-glass-color);    
}
.divisiones-largas-mx .cociente {
border-bottom: 2px solid var(--skin-glass-color);
}
#mostrarRestasMX:not(:checked) ~ .divisiones-largas-mx .fila-resta {
display: none;
}

/* --- Formato España (ES) --- */
/* --- CAMBIO: Lógica de alineación similar a la de MX --- */
.divisiones-largas-es .dividendo-es,
.divisiones-largas-es .divisor-es,
.divisiones-largas-es .cociente-es {
text-align: right;
}
.divisiones-largas-es .cociente-es {
text-align: left; /* El cociente en ES va a la izquierda */
}
.divisiones-largas-es tr:nth-child(n+3) > td {
text-align: left;
}
/* Reglas de la galera (sin cambios) */
.divisiones-largas-es .divisor-es {
border-left: 2px solid var(--skin-glass-color);
border-bottom: 2px solid var(--skin-glass-color);
padding-left: 8px;
}
.divisiones-largas-es .resta-es {
border-bottom: 1px solid var(--skin-glass-color);
color: var(--negro-contraste);
font-weight: bold;
}
#mostrarRestasES:not(:checked) ~ .divisiones-largas-es .fila-resta {
display: none;
}


/**********************
* AJUSTES PARA TABLET Y PC (sin cambios)
***********************/
@media screen and (min-width: 600px) {
.divisiones-largas-mx, .divisiones-largas-es {
font-size: 1.2em;
}
}



/*
*ESTILOS PARA RESPUESTAS DE CALCULADORA RAIZ CUADRADA OPERACIONES
*/
table.raiz-cuadrada{
font-size: 1.3em; 
letter-spacing: 6px; 
display: block;  
padding: 1em; 
overflow: auto; 
border-radius: 8px;
}
table.raiz-cuadrada th{
text-align: left; 
padding: 0em 0.5em;
}
table.raiz-cuadrada tr th:first-child{
border-right: 2px solid var(--negro-contraste); 
text-align: right;
}
table.raiz-cuadrada .radicando{
border-color: var(--negro-contraste); 
border-style: solid; 
border-width: 2px 2px 0px 2px;
}
table.raiz-cuadrada .resta{
text-decoration: underline;
}
table.raiz-cuadrada .relleno{
visibility: hidden;
}
table.raiz-cuadrada .borde-bottom{
border-bottom: 2px solid var(--negro-contraste);
}






/* ============================
   OPTIMIZACIÓN MÓVIL (CSS)
   Aplica SOLO en pantallas chicas
   ============================ */

@media (max-width: 768px) {

  /* No forzamos altura por defecto: la card luce normal */
  .app {
    /* sin min-height aquí */
    display: flex;
    flex-direction: column;
    transition: height .15s ease, padding-bottom .15s ease;
  }

  /* Solo cuando el teclado esté abierto, expandimos la card al alto visible real */
  body.keyboard-open .app {
    min-height: 100dvh; /* usa el viewport dinámico (con teclado) */
  }

  /* Fallback si 100dvh no está soportado: solo con teclado abierto */
  @supports not (height: 100dvh) {
    body.keyboard-open .app {
      min-height: calc(100vh - env(safe-area-inset-bottom));
    }
  }

  /* Paneles con scroll propio SOLO mientras el teclado está arriba
     (para no “recortar” la card cuando no hay teclado) */
  body.keyboard-open .app output,
  body.keyboard-open .app #suggestion-box,
  body.keyboard-open .app .panel-sugerencias,
  body.keyboard-open .app .vista-previa,
  body.keyboard-open .app .resultado {
    max-height: 40vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cuando el teclado se abre, “ancla” la botonera inferior */
  body.keyboard-open .controls,
  body.keyboard-open [data-mobile-dock="true"] {
    position: sticky;
    bottom: 0;
    padding: .5rem;
    z-index: 40;
  }

  /* Estética base de la botonera (ajústala a tu design system si quieres) */
  .controls {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    align-items: center;
  }

  .controls input[type="submit"],
  .controls input[type="reset"],
  .controls button {
    padding: .6rem .9rem;
    cursor: pointer;
  }

  /* Respeta el safe-area en iOS cuando está el teclado */
  @supports (padding: max(0px)) {
    body.keyboard-open .controls,
    body.keyboard-open [data-mobile-dock="true"] {
      padding-bottom: max(.5rem, env(safe-area-inset-bottom));
    }
  }
}