/* Estilos específicos para la página de APIs con Dart Frog */

.tutorial-article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.article-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #ecf0f1;
}

.article-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 300;
}

.article-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #27ae60;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background: #219653;
    transform: translateY(-2px);
}

.content-section {
    margin-bottom: 3rem;
}

.content-section h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Características principales */
.feature-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.feature-item {
    text-align: center;
    padding: 2rem;
    border-radius: 12px;
    border: 2px solid #ecf0f1;
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: #27ae60;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.feature-item h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Estructura de archivos */
.file-structure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    padding: 2rem;
    border-radius: 8px;
}

.structure-diagram {
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.tree {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.tree-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.tree-item.folder {
    color: #3498db;
    font-weight: bold;
}

.tree-item.file {
    color: #2c3e50;
}

.tree-sub {
    margin-left: 1.5rem;
    border-left: 1px dashed #bdc3c7;
    padding-left: 1rem;
}

.tree-item i {
    width: 16px;
    text-align: center;
}

.file-badge {
    background: #e74c3c;
    color: white;
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    margin-left: 0.5rem;
}

.structure-explanation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.explanation-item {
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #27ae60;
}

.explanation-item h5 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.explanation-item code {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

/* Ejemplos de rutas */
.route-examples {
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.route-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.route-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #e1e8ed;
}

.route-method {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
    min-width: 50px;
    text-align: center;
}

.route-method.get {
    background: #27ae60;
    color: white;
}

.route-method.post {
    background: #3498db;
    color: white;
}

.route-method.put {
    background: #f39c12;
    color: white;
}

.route-method.delete {
    background: #e74c3c;
    color: white;
}

.route-path {
    font-family: 'Courier New', monospace;
    color: #2c3e50;
    flex: 1;
}

.route-file {
    color: #7f8c8d;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
}

/* Middleware */
.middleware-uses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.use-item {
    text-align: center;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.use-item i {
    font-size: 2rem;
    color: #27ae60;
    margin-bottom: 1rem;
}

.use-item h4 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.middleware-flow {
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    border: 2px solid #27ae60;
}

.step-icon {
    width: 40px;
    height: 40px;
    background: #27ae60;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.step-content {
    flex: 1;
}

.step-content h5 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.flow-arrow i {
    color: #27ae60;
    font-size: 1.5rem;
}

/* Métodos HTTP */
.http-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.method-item {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 8px;
    color: white;
    transition: transform 0.3s ease;
}

.method-item:hover {
    transform: translateY(-5px);
}

.method-item.get {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.method-item.post {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.method-item.put {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.method-item.delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.method-item i {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.method-item h4 {
    margin: 0;
    font-size: 1.5rem;
}

.method-desc {
    display: block;
    margin-top: 0.5rem;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Probador de API */
.api-tester {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.tester-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group label {
    font-weight: 600;
    color: #2c3e50;
}

.method-selector {
    display: flex;
    gap: 0.5rem;
}

.method-btn {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.method-btn.active {
    color: white;
    border-color: transparent;
}

.method-btn.get.active {
    background: #27ae60;
}

.method-btn.post.active {
    background: #3498db;
}

.method-btn.put.active {
    background: #f39c12;
}

.method-btn.delete.active {
    background: #e74c3c;
}

.method-btn:hover:not(.active) {
}

.endpoint-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-control {
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-control:focus {
    border-color: #27ae60;
    outline: none;
}

.endpoint-options {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

.endpoint-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
}

.json-editor {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.json-toolbar {
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #ddd;
}

.json-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.json-btn:hover {
    background: #f0f0f0;
}

.json-textarea {
    width: 100%;
    resize: vertical;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
}

.json-status {
    padding: 0.5rem;
    border-top: 1px solid #ddd;
    font-size: 0.8rem;
    color: #27ae60;
}

.headers-editor {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
}

.header-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.header-key, .header-value {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.header-remove {
    width: 36px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.header-remove:hover {
    background: #c0392b;
}

.demo-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.demo-btn:hover {
    background: #219653;
    transform: translateY(-2px);
}

.demo-btn.small {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.demo-btn.large {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
}

.send-btn {
    background: #3498db;
}

.send-btn:hover {
    background: #2980b9;
}

/* Respuesta de la API */
.tester-response {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    overflow: hidden;
}

.response-header {
    background: #2c3e50;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.response-status {
    font-size: 0.9rem;
    display: flex;
    gap: 1rem;
}

.status-code {
    font-weight: bold;
}

.response-tabs {
    display: flex;
    border-bottom: 1px solid #e1e8ed;
}

.tab-btn {
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #7f8c8d;
    border-bottom: 3px solid transparent;
}

.tab-btn.active {
    color: #27ae60;
    border-bottom-color: #27ae60;
}

.response-content {
    padding: 1rem;
    min-height: 300px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.response-pre {
    margin: 0;
    border-radius: 4px;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    max-height: 300px;
    overflow-y: auto;
}

.response-pre code {
    color: #2c3e50;
}

/* Ejemplo completo */
.full-example {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.crud-operations {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.operation {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e1e8ed;
}

.op-method {
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 70px;
    text-align: center;
}

.op-method.get { background: #27ae60; color: white; }
.op-method.post { background: #3498db; color: white; }
.op-method.put { background: #f39c12; color: white; }
.op-method.delete { background: #e74c3c; color: white; }

.op-path {
    font-family: 'Courier New', monospace;
    color: #2c3e50;
    flex: 1;
}

.op-desc {
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* Parámetros */
.parameters-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.param-type {
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.param-type h4 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.param-example {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.param-example code {
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.arrow {
    color: #27ae60;
    font-weight: bold;
}

/* Buenas prácticas */
.best-practices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.practice-item {
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    border: 2px solid #ecf0f1;
}

.practice-icon {
    width: 60px;
    height: 60px;
    background: #27ae60;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.practice-item h4 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Ejercicios */
.exercises {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.exercise {
    padding: 1.5rem;
    border-radius: 6px;
    border-left: 4px solid #27ae60;
}

.exercise h3 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 1rem;
}

.exercise-requirements {
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}

.exercise-requirements h4 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.exercise-requirements ul {
    margin: 0;
    padding-left: 1.5rem;
}

.exercise-requirements li {
    margin-bottom: 0.25rem;
    color: #2c3e50;
}

/* Recursos */
.resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.resource-item {
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.resource-item h4 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resource-item a {
    color: #3498db;
    text-decoration: none;
}

.resource-item a:hover {
    text-decoration: underline;
}

/* Estilos para código */
.code-example {
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    padding: 1.5rem;
    margin: 1rem 0;
    overflow-x: auto;
}

.code-example h4 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.code-example pre {
    margin: 0;
    white-space: pre-wrap;
}

.code-example code {
    font-family: 'Courier New', monospace;
    color: #2c3e50;
    line-height: 1.5;
}

.example-code {
    background: #2c3e50;
    border-radius: 6px;
    overflow: hidden;
}

.example-code pre {
    margin: 0;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    max-height: 400px;
    overflow-y: auto;
}

.example-code h4 {
    background: #34495e;
    color: white;
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .file-structure {
        grid-template-columns: 1fr;
    }
    
    .api-tester {
        grid-template-columns: 1fr;
    }
    
    .http-methods {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .parameters-section {
        grid-template-columns: 1fr;
    }
}

/* Estilos para resaltado de sintaxis */
.keyword { color: #0077cc; font-weight: bold; }
.string { color: #dd1144; }
.comment { color: #999988; font-style: italic; }
.number { color: #009999; font-weight: bold; }