/* =========================================
           ESTILOS FUSIONADOS (GUÍA ODOO + NUEVOS)
           ========================================= */

        /* Estilos generales tipo Documento */
        body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          line-height: 1.6;
          color: #333;
          background-color: #f0f2f5;
          margin: 0;
          padding: 20px;
        }

        .document-page {
          max-width: 1140px;
          width: 95%;
          margin: 25px auto;
          background-color: white;
          padding: 45px 55px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          border-radius: 12px;
        }

        h1 {
          color: #2c3e50;
          border-bottom: 2px solid #714b67;
          /* Color Odoo */
          padding-bottom: 10px;
        }

        h2 {
          color: #714b67;
          margin-top: 40px;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
        }

        h3 {
          color: #444;
          margin-top: 25px;
          font-weight: 600;
          font-size: 1.1em;
        }

        p,
        li {
          font-size: 16px;
        }

        ul {
          list-style-type: square;
          color: #555;
        }

        /* Etiquetas de estado (Adaptado al nuevo estilo) */
        .badge {
          display: inline-block;
          padding: 0.25em 0.6em;
          font-size: 75%;
          font-weight: 700;
          line-height: 1;
          text-align: center;
          white-space: nowrap;
          vertical-align: baseline;
          border-radius: 4px;
          color: #fff;
          background-color: #714b67;
          /* Morado Odoo para consistencia */
          margin-right: 5px;
        }

        /* Estilos para simular la Terminal */
        .terminal {
          background-color: #1e1e1e;
          color: #d4d4d4;
          padding: 20px;
          border-radius: 6px;
          font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
          font-size: 14px;
          overflow-x: auto;
          margin: 15px 0;
          border-left: 5px solid #4caf50;
          /* Línea verde indicando "runnable" */
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .cmd {
          color: #fff;
          font-weight: bold;
        }

        .cmd::before {
          content: "$ ";
          color: #4caf50;
        }

        .comment {
          color: #6a9955;
          font-style: italic;
          display: block;
          margin-top: 10px;
          margin-bottom: 2px;
        }

        /* Estilos para ficheros de configuración */
        .file-header {
          background-color: #444;
          color: #fff;
          padding: 5px 15px;
          font-size: 13px;
          font-family: monospace;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          margin-top: 20px;
          display: inline-block;
        }

        .file-content {
          background-color: #fffff0;
          /* Fondo amarillo pálido */
          border: 1px solid #ccc;
          padding: 15px;
          font-family: 'Consolas', 'Monaco', monospace;
          font-size: 14px;
          color: #333;
          border-left: 5px solid #6c4ef0;
          white-space: pre-wrap;
          word-wrap: break-word;
          border-radius: 0 4px 4px 4px;
          /* Redondeo excepto arriba izquierda */
          margin-top: 0;
          /* Pegado al header */
        }

        .note {
          background-color: #e8f4fd;
          border-left: 4px solid #2196f3;
          padding: 15px;
          margin: 15px 0;
          border-radius: 0 4px 4px 0;
        }

        /* Footer */
        .footer {
          margin-top: 50px;
          padding-top: 20px;
          border-top: 1px solid #eee;
          font-size: 0.88em;
          color: #666;
          text-align: center;
        }

        .footer p {
          margin: 6px 0;
        }

        .footer a {
          color: #714b67;
          text-decoration: none;
          font-weight: 600;
        }

        .footer a:hover {
          text-decoration: underline;
        }

        /* Advertencias y Alertas */
        .warning {
          background-color: #fff3e0;
          border-left: 4px solid #ff9800;
          padding: 15px;
          margin: 15px 0;
          border-radius: 0 4px 4px 0;
          color: #e65100;
        }

        /* Botones de Navegación */
        .manual-actions {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 12px;
          margin-bottom: 24px;
        }

        .manual-bottom-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
          margin-top: 40px;
          padding-top: 20px;
          border-top: 1px solid #eee;
        }

        .manual-back,
        .manual-top {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 9px 18px;
          border: 1px solid #714b67;
          border-radius: 8px;
          color: #714b67;
          background: #fdfbfd;
          font-size: 0.92rem;
          font-weight: 600;
          text-decoration: none;
          box-shadow: 0 2px 6px rgba(113, 75, 103, 0.08);
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          cursor: pointer;
        }

        .manual-back:hover,
        .manual-top:hover {
          color: #ffffff;
          background: #714b67;
          box-shadow: 0 4px 12px rgba(113, 75, 103, 0.28);
          transform: translateY(-1px);
        }

        /* Controles Flotantes para Móviles */
        .mobile-scroll-controls {
          position: fixed;
          right: 18px;
          bottom: 20px;
          z-index: 99;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .mobile-scroll-controls button,
        .mobile-scroll-controls a {
          width: 42px;
          height: 42px;
          padding: 0;
          border: 1px solid rgba(113, 75, 103, 0.4);
          border-radius: 50%;
          color: #714b67;
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
          font-size: 1.1rem;
          cursor: pointer;
          text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.2s ease, background-color 0.2s ease;
        }

        .mobile-scroll-controls button:hover,
        .mobile-scroll-controls a:hover {
          transform: scale(1.08);
          background: #714b67;
          color: #ffffff;
        }

        /* Tablas Técnicas Limpias */
        .tech-table {
          width: 100%;
          border-collapse: collapse;
          margin: 20px 0;
          font-size: 0.95rem;
        }

        .tech-table th {
          background-color: #f4edf2;
          color: #714b67;
          text-align: left;
          padding: 12px 15px;
          border-bottom: 2px solid #714b67;
          font-weight: 700;
        }

        .tech-table td {
          padding: 12px 15px;
          border-bottom: 1px solid #eee;
        }

        .tech-table tr:hover {
          background-color: #fafafa;
        }

        /* Responsive */
        @media (max-width: 767px) {
          .document-page {
            padding: 24px 18px;
          }
        }

        /* Ajuste para Mermaid en fondo claro */
        .mermaid {
          text-align: center;
          margin: 30px 0;
        }