/* ================================================
   FORMULARIO --------------------- insertar.css
   ================================================ */
.formulario-columna {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 480px;
    margin: auto;
    padding: 20px;
}

.formulario-columna label {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.07em;
    margin-bottom: 3px;
    text-align: left;
    display: block;
}

.formulario-columna input,
.formulario-columna textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid #333;
    background: var(--background); /* Fondo del input sigue el tema */
    color: var(--color); /* Texto del input sigue el tema */
    font-size: 1em;
    transition: border 0.2s;
    margin-bottom: 2px;
}

.formulario-columna textarea {
    resize: vertical;
}

.formulario-columna input:focus,
.formulario-columna textarea:focus {
    border: 2px solid var(--primary-color); /* Borde de enfoque usa color de tema */
    outline: none;
}

.motivos-row {
    display: flex;
    flex-direction: column;  /* Vertical */
    align-items: flex-start; /* Alineado a la izquierda */
    gap: 12px;               /* Espacio entre opciones */
    margin-top: 6px;
    padding-left: 1cm; /* Sangría de 1 cm respecto al borde izquierdo */
}

.radio-opcion {
    font-family: 'Arial', sans-serif;  /* Fuente clara y distinta a la de títulos */
    font-weight: normal;
    font-size: 0.95em;                 /* Un poco más pequeño que los títulos */
    color: #ad56ff;                  /* Mantenemos el morado específico para este componente */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.25s;
}

.radio-opcion:hover {
    background: rgba(var(--primary-color-rgb), 0.18); /* Usar RGBA si existe o dejar el color original */
    /* Para simplificar, usamos un hover estándar: */
    background: rgba(200, 200, 200, 0.1);
}

.radio-opcion input[type="radio"] {
    margin: 0;
    width: 17px;
    height: 17px;
}

.formulario-columna button {
    margin-top: 14px;
    background: var(--primary-color);
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 1.07em;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 4px 12px rgba(13, 121, 230, 0.3);
}

.formulario-columna button:hover {
    /* Fondo ligeramente más oscuro al pasar el ratón */
    background: #0060b0;
}

#confirmacion {
    margin-top: 16px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    padding: 14px;
    background: rgba(13, 121, 230, 0.1); /* Fondo translúcido del color primario */
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.motivo-texto {
    color: #ad56ff; /* Morado profesional */
    font-family: 'Arial', sans-serif;
    font-weight: normal;
}

/* ================================================
   DNI
   ================================================ */
#insertaDNI .card {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 20px 25px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  max-width: 300px;
  margin: 0 auto;
}

#insertaDNI input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.8px solid var(--primary-color); /* Usa el color de tema */
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  outline-color: var(--primary-color);
}

#insertaDNI input[type="button"] {
  background-color: var(--primary-color);
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
  width: 100%;
  transition: background-color 0.3s ease;
}

#insertaDNI input[type="button"]:hover {
  background-color: #005a9e; /* Tono oscuro para hover */
}

#insertaDNI #resultado {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
}

/* nuevo
/* ================================================
   3. ESTILOS DE FORMATO DE TEXTO (El código que falta)
   ================================================ */

/* Título principal de secciones */
#titulos > h2,
#formatos h2 {
    color: #33cf4a;
    background: #181818;
    text-align: center;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 20px;
    margin: 18px 0 8px 0;
}

/* Títulos dentro de bloques .libre */
.libre h2 {
    color: #fafafa; 
    background: #222; 
    text-align: left;
    margin: 12px 0 8px 0;
    border-radius: 6px;
    font-size: 1.6em;
    font-weight: normal;
}

/* ================================================
   BLOQUES DE CONTENIDO ESTILO LIBRETA
   ================================================ */
.libre {
    margin-left: 1cm; 
    padding-left: 16px; 
    border-left: 3px solid #33cf4a; 
    background: #232323; 
    color: #fff; 
    border-radius: 8px; 
    margin-top: 16px;
    margin-bottom: 16px;
    position: relative;
}
.libre h1, .libre h2, .libre h3, .libre h4, .libre h5, .libre h6,
.libre b, .libre i, .libre tt, .libre big, .libre small {
    display: block;
    margin: 6px 0;
}
.libre .formula { display: inline; margin-left: 6px; }
.formula { background: #1e2636; color: #ffc800; font-size: 18px; border-radius: 8px; padding: 8px 16px; display: inline-block; margin-top: 8px; }

/* ================================================
   TABLAS DE FORMATO
   ================================================ */
.formato-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.formato-table th, .formato-table td { padding: 8px 12px; border: 1px solid #555; text-align: left; }
.formato-table th { background: #222; color: #33cf4a; }
.formato-table code { background: #222; color: #a7cdff; padding: 2px 6px; border-radius: 4px; }

.titulo-table { width: 100%; border-collapse: collapse; margin: 16px 0; background: #222; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px #0008; }
.titulo-table th, .titulo-table td { padding: 10px 14px; border: 1px solid #333; text-align: left; font-size: 1em; }
.titulo-table th { background: #181818; color: #33cf4a; font-weight: bold; }
.titulo-table td code { background: #232f40; color: #a7cdff; padding: 2px 8px; border-radius: 4px; font-size: 0.92em; display: inline-block; }
.titulo-table td h1, .titulo-table td h2, .titulo-table td h3, .titulo-table td h4, .titulo-table td h5, .titulo-table td h6 { color: #fff !important; background: none !important; margin: 0; padding: 0; text-align: left !important; font-weight: normal; }

/* ================================================
   SECCIÓN DE FORMATOS DE TEXTO
   ================================================ */
#formatos b, #formatos i, #formatos tt, #formatos big, #formatos small { display: block; margin: 6px 0; color: #fafafa; }
#formatos sup { color: #fafafa; }

/* ================================================
   SECCIÓN DE INSERCIÓN DE MULTIMEDIA
   ================================================ */
#inserta { background: #222; padding: 32px; border-radius: 16px; }
#inserta h2 { color: #33cf4a; background: #181818; text-align: center; border-radius: 8px; margin: 24px 0 8px 0; font-size: 1.3em; font-weight: bold; padding: 12px 0; }
#inserta .titulo-table h1, #inserta .titulo-table h2, #inserta .titulo-table h3, #inserta .titulo-table h4, #inserta .titulo-table h5, #inserta .titulo-table h6 { background: none !important; color: #fff !important; text-align: left !important; margin: 0; padding: 0; }
#inserta #titulos-ejemplo h1, #inserta #titulos-ejemplo h2, #inserta #titulos-ejemplo h3, #inserta #titulos-ejemplo h4, #inserta #titulos-ejemplo h5, #inserta #titulos-ejemplo h6 { background: none !important; color: #fff !important; text-align: left !important; margin: 0; padding: 4px 0; }

/* ================================================
   TARJETAS GENÉRICAS (CARD)
   ================================================ */
/* 🛑 NOTA: Este .card es el estilo GENÉRICO que usan tus páginas de formato.
   NO es el .card de bienvenida ni el .noticia-card de admin.css. */
.card { 
    background: #676a6e; 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 20px; 
    text-align: center; 
    box-shadow: 0 2px 8px #0008; 
}
.card pre { background: #222; color: #a7cdff; padding: 10px 18px; border-radius: 8px; margin-bottom: 10px; font-size: 1em; overflow-x: auto; }
.card code { font-family: monospace; }

/* ================================================
   CODIGO PARA LA CHINCHETA
   ================================================ */
.caja-codigo-relativa { position: relative; margin-bottom: 12px; }
.caja-codigo-relativa pre { margin: 0; padding-top: 18px; background: #222; color: #a7cdff; border-radius: 8px; font-size: 1em; overflow-x: auto; position: relative; }
.formula-pin { position: absolute; top: 6px; left: 10px; width: 24px; height: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; border-radius: 50%; }