<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>{% block title %}ENS PYME - Herramienta de Ciberseguridad{% endblock %}</title>
  <style>
    /* Reset y base */
    * {
      box-sizing: border-box;
    }
    
    body { 
      font-family: Arial, sans-serif; 
      margin: 0;
      padding: 2em; 
      line-height: 1.4;
      background-color: #f8f9fa;
      color: #333;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      padding: 2em;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    /* Tipografía */
    h1 { 
      margin-bottom: 0.5em; 
      color: #2c3e50;
      border-bottom: 3px solid #0066cc;
      padding-bottom: 0.5em;
    }
    
    h2 { 
      margin-bottom: 0.5em; 
      margin-top: 1.5em;
      color: #34495e;
    }
    
    p { 
      margin: 0.5em 0; 
    }
    
    p.intro { 
      margin-top: 0; 
      color: #555; 
      font-style: italic;
    }
    
    /* Tablas */
    table { 
      border-collapse: collapse; 
      margin-top: 1em; 
      width: 100%;
      background: white;
    }
    
    th, td { 
      border: 1px solid #ddd; 
      padding: 0.6em; 
      text-align: left; 
    }
    
    th { 
      background: #f8f9fa; 
      font-weight: bold;
      color: #2c3e50;
    }
    
    tr:nth-child(even) { 
      background: #fafafa; 
    }
    
    /* Estados de cumplimiento */
    .cumple, .estado-cumple { 
      color: #28a745; 
      font-weight: bold; 
    }
    
    .parcial, .estado-parcial { 
      color: #fd7e14; 
      font-weight: bold; 
    }
    
    .no_cumple, .estado-no { 
      color: #dc3545; 
      font-weight: bold; 
    }
    
    /* Botones */
    .btn { 
      display: inline-block;
      padding: 0.6em 1.2em;
      margin: 0.25em 0.5em 0.25em 0;
      background: #0066cc;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-size: 0.95em;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .btn:hover { 
      background: #0055aa;
      transform: translateY(-1px);
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .btn-primary { 
      background: #0066cc; 
    }
    
    .btn-primary:hover { 
      background: #0055aa; 
    }
    
    .btn-success, .btn-download, .btn-csv { 
      background: #28a745; 
    }
    
    .btn-success:hover, .btn-download:hover, .btn-csv:hover { 
      background: #218838; 
    }
    
    .btn-warning { 
      background: #ffc107; 
      color: #212529;
    }
    
    .btn-warning:hover { 
      background: #e0a800; 
    }
    
    .btn-danger { 
      background: #dc3545; 
    }
    
    .btn-danger:hover { 
      background: #c82333; 
    }
    
    .btn-secondary { 
      background: #6c757d; 
    }
    
    .btn-secondary:hover { 
      background: #5a6268; 
    }
    
    /* Formularios */
    form {
      margin: 1em 0;
    }
    
    label {
      display: block;
      margin-bottom: 0.5em;
      font-weight: bold;
      color: #495057;
    }
    
    input[type="text"], 
    input[type="file"], 
    select, 
    textarea {
      width: 100%;
      max-width: 500px;
      padding: 0.5em;
      border: 1px solid #ced4da;
      border-radius: 4px;
      font-size: 1em;
    }
    
    input[type="text"]:focus, 
    select:focus, 
    textarea:focus {
      outline: none;
      border-color: #0066cc;
      box-shadow: 0 0 0 2px rgba(0,102,204,0.25);
    }
    
    /* Alertas y mensajes */
    .alerta {
      margin: 1em 0;
      padding: 1em;
      border: 1px solid #ddd;
      background: #f8f9fa;
      border-radius: 5px;
    }
    
    .alert {
      padding: 0.75em 1em;
      margin: 1em 0;
      border-radius: 5px;
    }
    
    .alert-success {
      background: #d4edda;
      border: 1px solid #c3e6cb;
      color: #155724;
    }
    
    .alert-error, .alert-danger {
      background: #f8d7da;
      border: 1px solid #f5c6cb;
      color: #721c24;
    }
    
    .alert-warning {
      background: #fff3cd;
      border: 1px solid #ffeaa7;
      color: #856404;
    }
    
    .alert-info {
      background: #cce7ff;
      border: 1px solid #b8daff;
      color: #004085;
    }
    
    /* Listas */
    ul li {
      margin: 0.5em 0;
    }
    
    /* Código */
    pre, code {
      background: #f8f9fa;
      padding: 0.5em;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
    }
    
    pre {
      overflow-x: auto;
    }
    
    /* Separadores */
    hr {
      border: none;
      border-top: 1px solid #dee2e6;
      margin: 2em 0;
    }
    
    /* Navegación/Enlaces */
    .nav-links {
      margin-top: 2em;
      padding-top: 1em;
      border-top: 1px solid #dee2e6;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      body {
        padding: 1em;
      }
      
      .container {
        padding: 1em;
      }
      
      table {
        font-size: 0.9em;
      }
      
      th, td {
        padding: 0.4em;
      }
    }
    
  </style>
  
  <!-- Estilos adicionales específicos -->
  {% block extra_css %}{% endblock %}
</head>
<body>
  <div class="container">
    {% block content %}{% endblock %}
    
    {% with mensajes = get_flashed_messages(with_categories=true) %}
      {% if mensajes %}
        <div class="flash-messages">
          {% for categoria, texto in mensajes %}
            <div class="alert alert-{{ 'danger' if categoria=='error' else categoria }}">
              {{ texto }}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}
  </div>
</body>
</html> 